方案一
npm init -ynpm install tailwindcssnpx tailwindcss initnpm install tailwindcss postcss-cli autoprefixer
方案二
- 安装 PostCSS
npm i -save-dev postcss-cli - 安装Tailwind CSS以及相关依赖
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest - 创建配置文件
npm init -y - tailwind 初始化
npx tailwindcss init
方案一、二后，添加Tailwind作为PostCSS插件
- 在根目录创建 postcss.config.js 文件
module.exports = { plugins: { tailwindcss: {}, autoprefixer: {}, } } - 创建你的css文件
- 创建一个css文件，位置随意，如css/style.css，并将内容修改为如下：
@tailwind base; @tailwind components; @tailwind utilities;
- 创建一个css文件，位置随意，如css/style.css，并将内容修改为如下：
加入自己项目，进行体验
生成css文件
npx tailwindcss -o tailwind.css-
通过npm生成css文件
- package.json 配置
"scripts": { "build": "postcss css/style.css -o public/build/tailwind.css" },style.css和之前创建的css有关 npm run build
- package.json 配置
npx tailwindcss -i ./css/style.css -o .public/dist/.tailwind.css --watch
版本差异
- 中文文档支持2.x，目前最新版是3.x，所以最好看英文文档。在配置tailwind.config.js，2.版本没有content项，3.x有content配置内容；
官方地址
https://www.tailwindcss.cn/docs/installation
https://tailwindcss.com/docs/installation
