tailwindcss的简单安装和使用

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