文章目录

• Tailwind CSS 安装步骤|Vanilla Vue
• • Vanilla（原生）
  • Vue

Tailwind CSS 安装步骤|Vanilla Vue

环境：Windows10，node.js 14.16.0，npm 6.14.11，VScode

Vanilla（原生）

1. 新建文件夹并使用VScode打开

2. 在终端中初始化package.json

   npm init
   

3. 安装Tailwind以及它的依赖

   npm install -D tailwindcss postcss-cli autoprefixer
   

4. 初始化tailwind.config.js和postcss.config.js文件

   npx tailwindcss init -p
   

5. 在项目文件夹中新建css目录并创建style.css文件，载入Tailwind核心三大部件

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

6. 在package.json中新增一个script

   "watch": "postcss css/style.css -o dist/style.css --watch"
   

7. 打开tailwind.config.js在purge数组内添加会编写Tailwind class的文件，这里设置为dist目录下所以HTM文件

   purge:[
   	'./dist/**/*.html'
   ]
   

8. 再次在package.json中新增一个script

   "build": "NODE_ENV=production postcss css/style.css -o dist/style.css"
   

   这里window平台会报 ‘NODE_ENV’ 不是内部或外部命令，也不是可运行的程序或批处理文件。因此需要执行以下操作

   • 安装cross-env

     npm install cross-env --save-dev
     

   • 在NODE_ENV=前加 cross-env

     "build": "cross-env NODE_ENV=production postcss css/style.css -o dist/style.css"
     

9. 此时就可以开始在dist文件夹下使用Tailwind了，npm run watch可以检测文件变化重新构建css文件，npm run build可以根据使用的class缩减生成css文件大小

Vue

1. 使用Vite创建Vue项目

   npm init @vitejs/app <project-name>
   cd <project-name>
   npm install
   

2. 安装Tailwind以及它的依赖

   npm install -D tailwindcss postcss-cli autoprefixer
   

3. 初始化tailwind.config.js和postcss.config.js文件

   npx tailwindcss init -p
   

4. 打开tailwind.config.js在purge数组内添加会编写Tailwind class的文件

   purge:[
   	'./index.html',
       './src/**/*.{vue,js,ts,jsx.tsx}'
   ]
   

5. 在src文件夹中创建index.css文件，载入Tailwind核心三大部件

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

6. 在main.js中导入index.css

   import './index.css'
   

7. 此时就可以开始正常使用Tailwind了，npm run build可以根据使用的class缩减生成的css文件大小