- 随便创建一个项目文件夹(test)
- 在项目文件夹打开终端,输入
npm init -y
- 安装tailwindcss的一些依赖,输入
npm install tailwindcss postcss-cli autoprefixer
- 在终端输入
npx tailwind init,这样会在文件夹中自动新建一个tailwind.config.js
- 在文件夹中手动新建一个postcss.config.js,内容如下
module.exports={ plugins:[ require('tailwindcss'), require('autoprefixer'), ] }
- 创建一个目录,里面是自己的css文件,添加内容如下,这样可以在自己的css文件中使用tailwindcss
@tailwind base; @tailwind components; @tailwind utilities;
- 然后进入package.json中修改代码,在scripts中添加
"build": "postcss css/tailwind.css -o public/tailwind.css"
- 在终端中输入
npm run build,这样就会在项目中自动生成包含tailwind.css的public文件夹了
- 最后在想要使用tailwindcss的html文件中插入public中的tailwind.css文件就可以使用了