1 TailwindCSS安装和开发环境配置

TailwindCSS提供了官方的安装教程，目前推荐的是使用TailwindCLI的方式，也就是通过npm或者独立的tailwindcss程序安装和配置开发环境。

1.1 安装Node.js

由于要使用npm，所以需要首先安装Node.js，本文就不再赘述。

1.2 安装TailwindCSS

在安装完Node.js之后，打开终端，输入以下命令安装TailwindCSS

npm install -D tailwindcss postcss autoprefixer

执行完命令之后会在目录下生成package.json和package-lock.json两个文件。

1.3 配置TailwindCSS项目开发环境

新建一个项目文件夹TailwindCSSLearn，在该文件夹下使用终端执行以下命令

npx tailwindcss init

命令执行完成之后会在该项目目录下生成一个tailwind.config.js文件，内容如下

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}

在上面的content字段中配置使用TailwindCSS的文件模板信息，比如我们想要当前目录下的所有html文件中使用TailwindCSS，则将上述内容修改如下

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./*.html"],
  theme: {
    extend: {},
  },
  plugins: [],
}

如果想要当前目录下的所有html文件和js中使用TailwindCSS，则进行如下修改

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

修改完成后，我们在项目目录下创建一个src/input.css文件，在该文件中引入Tailwind CSS的样式定义，文件内容如下

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

之后新建一个postcss.config.js文件，在文件中增加以下内容

module.exports = {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    }
  }

然后在package.json文件中增加以下内容，

{
  "devDependencies": {
    "autoprefixer": "^10.4.17",
    "postcss": "^8.4.33",
    "tailwindcss": "^3.4.1"
  },
  "scripts": {
    "dev": "npx tailwindcss -i ./src/input.css -o ./src/output.css --watch"
  }
}

然后在终端执行以下命令

npm run dev

通过上述命令会实时扫描在tailwind.config.js所定义的模板文件，也就是当前项目目录下的html文件，然后通过TailwindCSS重建在html中所使用的css属性，并在src目录下生成output.css文件，所以我们在html中只需要引用这个文件output.css文件就可以使用TailwindCSS中的属性。

然后在项目文件下创建一个index.html文件，在文件中新增如下代码

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

然后在浏览器中打开html文件就可以看到带着下划线的Hello World!。

如果项目开发完成，你想要最小化的css文件，可以使用以下命令生成最小化的css文件

npx tailwindcss -i ./src/input.css -o ./src/output.css --minify

在生产环境中使用最小化css有利于节省网络带宽、流量，加快网站打开速度。

参考