tailwind css引入 react项目

tailwindcss官方中文文档

项目版本

node版本：16.20.1
npm版本：8.3.0

"autoprefixer": "^10.3.3",
"postcss": "^8.3.6",
"sass": "^1.62.1",

第一步 下载安装依赖 tailwindcss

npm install tailwindcss autoprefixer postcss sass -D

第二步 初始化配置 创建 postcss.config.js 、 tailwind.config.js 文件

// postcss.config.js

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

// tailwind.config.js

const defaultTheme = require('tailwindcss/defaultTheme');
const plugin = require('tailwindcss/plugin')

module.exports = {
  mode: 'jit',
  purge: ['./public/index.html', './src/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {
      fontWeight: ['hover', 'focus'],
      fontFamily: {
        sans: ['Inter var', ...defaultTheme.fontFamily.sans],
      },
    },
  },
  variants: {},
  plugins: [
  ]
};

第三步 引入根样式文件