使用Tailwind CSS 创建一个新项目

先提前创建好一个空文件夹，再在VsCode中打开该空文件夹

一、安装PostCSS

打开该空文件夹在根目录运行一下代码

复制代码

npm i --save-dev postcss-cli

二、安装Tailwind CSS以及相关的依赖

复制代码

npm install tailwindcss@latest postcss@latest autoprefixer@latest

此时的目录：

三、安装新版本PostCSS插件

复制代码

npm install -D @tailwindcss/postcss

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

复制代码

import tailwindcss from '@tailwindcss/postcss'

export default {
  plugins: [
    tailwindcss,
  ]
}

四、创建配置文件

运行命令生成一个package.json文件

复制代码

npm init -y

运行命令在根目录创建一个tailwind.config.js文件

复制代码

npx tailwindcss init

若出现报错：

则运行以下代码：

复制代码

// 1.先清理 npm 缓存（最关键）
npm cache clean --force

// 2.重新安装 Tailwind CSS
npm install -D tailwindcss

// 3.完整命令初始化配置文件
npx tailwindcss-cli init

看到提示：

键盘输入 y → 按 回车（Enter），等待几秒生成 创建一个**tailwind.config.js**文件

将**tailwind.config.js文件内容修改为：**

复制代码

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

五、创建css文件

创建源文件src，创建src/style.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/tailwind.css -o dist/tailwind.css --watch",
}

此时运行**npm run watch**就可以自动监听你的页面改动

若出现报错：

则运行：

复制代码

// 1.
npm pkg set scripts.watch="postcss src/style.css -o dist/tailwind.css --watch"
// 2.
npm run watch

九、优化Tailwind CSS样式文件大小

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

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

复制代码

module.exports = {
  purge: ["./src/*.html"],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
};
// 在 "purge "选项内增加了一个文件路径。
// 意思就是打包的时检查这个路径下的这些文件，然后自动删除这些文件没用到的css。

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

复制代码

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

// 运行下面命令安装，因为需要用到cross-env，
npm i cross-env --save-dev

在整个项目完成之后，运行 npm run build:css ，会自动构建一个最小的css文件。

需要注意的是这条命令在所有项目完成后运行，如果在你项目开发阶段运行会造成之后新增加的css类，在之前构建的css中不存在，因为优化掉了。

所以在项目开发阶段，只需要运行npm run watch就可以了。