HTML
CSS
Javascript
VUE
tailwind
kooboo

对于 tailwind v2 版本

安装PostCSS

新建一个项目目录，然后在根目录运行

npm i --save-dev postcss-cli

安装Tailwind CSS以及相关依赖

npm install tailwindcss@latest postcss@latest autoprefixer@latest

添加Tailwind作为PostCSS插件

在根目录新建一个postcss配置文件postcss.config.js,并且将文件内容修改为以下：

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

创建您的配置文件

运行以下命令

npm init -y

这会在根目录下生成一个package.json文件。

继续运行

npx tailwindcss init

这会在你的项目根目录创建一个tailwind.config.js文件，将内容修改为以下：

// tailwind.config.js
module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}

创建你的css文件

创建一个css文件，位置随意，比如src/style.css,并且将内容修改为如下：

/* ./你的css文件夹/styles.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

创建构建命令

现在打开 package.json 文件，添加以下运行脚本：

"scripts": {
  "build": "postcss src/style.css -o dist/tailwind.css"
}

创建Tailwind CSS

这个构建的css文件就是你最终使用的css文件。 现在，从命令行运行 npm run build 将构建最终的CSS文件。

生成的文件位于 dist/tailwind.css （您可以在上面的命令中更改位置）。

然后在你的html文件中引用这个css文件就可以。

更改文件后自动重新生成CSS

如果你想要每次修改文件后，自动重新生成一下css文件，比如你在style.css里自定义了一个组件，并且希望实时生效，那么就需要用到监听。 现在打开 package.json 文件，添加以下运行脚本：

"scripts": {
  "watch": "postcss build src/css/tailwind.css -o dist/css/tailwind.css --watch",
}

现在 package.json 文件的脚本部分变成了这样：

"scripts": {
    "build": "tailwindcss build src/css/tailwind.css -o dist/css/tailwind.css",
    "watch": "postcss build src/css/tailwind.css -o dist/css/tailwind.css --watch",
  },

这时候只要运行npm run watch就可以自动监听你的页面改动。

优化Tailwind CSS文件大小

上面编译出来的Tailwind是完整的css文件，总共18万行css代码，文件将近4M。但是我们实际的项目，其实根本用不着所有Tailwind CSS自带的样式，所以这时候，我们就需要优化一下，我们希望最终打包的时候，css只编译我们用到的部分，用不到的自动删除掉。

这时候需要配置一下tailwind.config.js:

// tailwind.config.js
  module.exports = {
   purge: [
     './src/*.html',
   ],
    darkMode: false, // or 'media' or 'class'
    theme: {
      extend: {},
    },
    variants: {},
    plugins: [],
  }

可以看到我们在 "purge "选项内增加了一个文件路径。意思就是打包的时候，检查这个路径下的这些文件，然后自动删除这些文件没用到的css。路径这里可以使用通配符，更详细的教程可以看 http://tailwind.wyz.xyz/docs/optimizing-for-production

现在打开 package.json 文件，添加以下运行脚本：

"scripts": {
 "build:css": "cross-env NODE_ENV=production postcss src/css/tailwind.css -o dist/css/tailwind.css"
}

现在 package.json 文件的脚本部分变成了这样：

"scripts": {
    "build": "tailwindcss build src/css/tailwind.css -o dist/css/tailwind.css",
    "watch": "postcss build src/css/tailwind.css -o dist/css/tailwind.css --watch",
    "build:css": "cross-env NODE_ENV=production postcss src/css/tailwind.css -o dist/css/tailwind.css"
  },

因为这条命令需要用到cross-env,所以安装一下：

npm i cross-env --save-dev

在整个项目完成之后，运行npm run build:css,会自动构建一个最小的css文件。切记这条命令在所有项目完成后运行，如果在你项目开发阶段运行。会造成，你之后新增加的css类，在之前构建的css中不存在，因为被你优化掉了。所以在项目开发阶段，只需要运行npm run watch就可以。

自动刷新HTML文件

这是个题外话，不属于Tailwind CSS的范畴，如果你在写静态页面的时候，需要每次修改html页面，浏览器就自动刷新这个页面，那么只需要在vscode内搜索Live Server并且安装，之后在你需要预览的页面，右键，选择Open with Live Server即可。

对于 tailwind v3

安装 Tailwind CSS

tailwindcss 通过 npm 安装，并创建您的 tailwind.config.js 文件。

npm install -D tailwindcss
npx tailwindcss init

配置您的模板路径

在 tailwind.config.js 文件中添加所有模板文件的路径。

module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

将 Tailwind 指令添加到您的 CSS

创建一个css文件，位置随意，比如src/main.css,并且将内容修改为如下：

@tailwind base;
@tailwind components;
@tailwind utilities;

开始在您的 HTML 中使用 Tailwind

将已编译的 CSS 文件添加到 <head> 并开始使用 Tailwind 来设置您的内容样式。

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="/dist/output.css" rel="stylesheet">
</head>
<body>
  <h1 class="text-3xl font-bold underline">
    Hello world!
  </h1>
</body>
</html>

创建构建命令

运行以下命令

npm init -y

现在打开 package.json 文件，添加以下运行脚本：

"scripts": {
  "build": "tailwindcss -i ./src/main.css -o ./dist/output.css --watch"
}

这时候只要运行npm run build就可以自动监听你的页面改动并且实时编译了。

自动刷新HTML文件

这是个题外话，不属于Tailwind CSS的范畴，如果你在写静态页面的时候，需要每次修改html页面，浏览器就自动刷新这个页面，那么只需要在vscode内搜索Live Preview并且安装，之后在你需要预览的页面，右键，选择Live Preview：Show Preview即可。