tailwind安装初始化

方案一

• npm init -y
• npm install tailwindcss
• npx tailwindcss init
• npm 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文件 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

• npx tailwindcss -i ./css/style.css -o .public/dist/.tailwind.css --watch

• CDN https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css

版本差异

• 中文文档支持2.x，目前最新版是3.x，所以最好看英文文档。在配置tailwind.config.js，2.版本没有content项，3.x有content配置内容；

官方地址

https://www.tailwindcss.cn/docs/installation
https://tailwindcss.com/docs/installation

参考地址

https://wyz.xyz/d/133-tailwind-css