你好世界！今天，我想分享我在新鲜工作时学到的知识。
什么是新鲜？
Fresh是“下一代网络框架”，可以大致翻译成“我很酷的基于DENO的SSR框架”。新鲜，而不是使用react使用preact，它是常规尺寸反应的小（3kb）替代品。就像React一样，请使用.jsx / .tsx文件和语法，并且与基于React的库兼容。
酷！但是什么是TWING，我们为什么要关心呢？好吧，twind是tailwind css中tailwind css的微小实现。太棒了，那是什么问题？为什么不坚持呢？答案很简单，目前它们没有vs-scodium的扩展，并且它们的常规VS代码扩展名不起作用。有刺耳的修复程序，但是我为什么要关心是否可以使用常规的旧尾风？
创建一个项目
就像node.js项目一样，您需要安装js解释器。要在基于UNIX的系统上执行此操作，请使用此命令：
curl -fsSL https://deno.land/x/install/install.sh | sh
接下来，我建议通过更新$PATH变量或像我所做的alias来存储deno可执行文件。
为了实际生成新的项目，请使用此命令：
deno run -A -r https://fresh.deno.dev my-project
CD-IN和Type deno task start将启动您的应用程序的开发版本。
删除Twind
成功生成和运行新的新鲜应用程序后，转到import_map.json并删除以下行：
{
"imports": {
"$fresh/": "https://deno.land/x/fresh@1.1.5/",
"preact": "https://esm.sh/preact@10.13.1",
"preact/": "https://esm.sh/preact@10.13.1/",
"preact-render-to-string": "https://esm.sh/*preact-render-to-string@5.2.6",
"@preact/signals": "https://esm.sh/*@preact/signals@1.1.3",
"@preact/signals-core": "https://esm.sh/*@preact/signals-core@1.2.3",
DELETE THESE TWO LINES
"twind": "https://esm.sh/twind@0.16.19",
"twind/": "https://esm.sh/twind@0.16.19/"
}
}
接下来，我们需要摆脱main.ts中的参考
/// <reference no-default-lib="true" />
/// <reference lib="dom" />
/// <reference lib="dom.iterable" />
/// <reference lib="dom.asynciterable" />
/// <reference lib="deno.ns" />
import { start } from "$fresh/server.ts";
import manifest from "./fresh.gen.ts";
// Delete two lines bellow
import twindPlugin from "$fresh/plugins/twind.ts";
import twindConfig from "./twind.config.ts";
// Also update the start execution to following
await start(manifest, {});
});
很好！现在，我们应该有一个没有样式的应用程序。
安装尾风CSS
接下来，我们需要让自己获得tailwind-cli的副本。您可以在“释放”选项卡here中找到一个。使用您的平台查找最新版本，然后将其下载到您的Fresh Project目录中。如果您喜欢的话，请将其重命名为taildoust。
deno.json中的下一个我们需要将开始脚本更新为以下：
{
"tasks": {
"start": "tailwindcss -i ./static/styles/input.css -o ./static/styles/tailwind.css --minify --watch & deno run -A --watch=static/,routes/ dev.ts"
},
...
}
接下来，我们需要在 static 目录中创建一个称为样式的目录。在样式中，我们需要创建名为input.css的文件，并具有以下值：
/* input.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
很好！接下来，我们需要使用以下代码创建tailwind.config.cjs文件：
/** @type {import('https://esm.sh/tailwindcss@3.1.8').Config} */
module.exports = {
content: [
"./routes/**/*.{tsx,ts}",
"./islands/**/*.{tsx,ts}",
"./components/**/*.{tsx,ts}",
],
theme: {},
plugins: [],
};
和作为最后步骤，我们需要围绕应用程序创建包装器。为此，创建一个在routes目录中的名为_app.tsx的文件。应用程序文件应违约导出一个组件，该组件返回与常规HTML5文件类似的JSX结构。这是我的例子：
import { Head } from "$fresh/runtime.ts";
import { AppProps } from "$fresh/src/server/types.ts";
export default function App(props: AppProps) {
const { Component } = props;
return (
<html>
<Head>
<meta charSet="utf-8" />
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
<title>Goodbye twind!</title>
<link rel="icon" type="image/png" href="../images/favicon.ico"/>
{/* HERE IS OUR TAILWINDCSS stylesheet */}
<link rel="stylesheet" href="../styles/tailwind.css" />
</Head>
<body>
<Component />
</body>
</html>
);
}
真棒！完成最后一步，您应该能够将常规的旧尾风CSS与所有的好东西一起使用。
注意：请原谅我的英语不好，因为这是我的第二语言。