tailwindcss使用教程

安装Tailwind

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

创建配置文件

npx tailwindcss init -p

会在项目中创建tailwind.config.js文件和postcss.config.js文件

引入Tailwind样式到项目中

创建一个css样式文件，引入：

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

在tailwind.config.js中添加代码：

  module.exports = {
   purge: [
    // 添加如下代码
     './src/**/*.html',
     './src/**/*.{js,ts,vue,jsx,tsx}',
   ],
    darkMode: false, // or 'media' or 'class'
    theme: {
      extend: {},
    },
    variants: {},
    plugins: [],
  }

在使用中出现如下报错：

Error: PostCSS plugin tailwindcss requires PostCSS 8.

说明版本不兼容，卸载并使用兼容版本

npm uninstall tailwindcss postcss autoprefixer
npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

具体用法可以参考官网：中文文档 - Tailwind CSS 中文文档