在react中使用tailwindcss

安装tailwind css

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

安装 CRACO

由于 Create React App 不能让您覆盖原生的 PostCSS 配置，所以我们还需要安装 CRACO 才能配置 Tailwind。

npm install @craco/craco

配置CRACO

在项目根部创建一个 craco.config.js，并添加 tailwindcss 和 autoprefixer 作为 PostCSS 插件

// craco.config.js
module.exports = {
  style: {
    postcss: {
      plugins: [
        require('tailwindcss'),
        require('autoprefixer'),
      ],
    },
  },
}

创建 Tailwind 配置文件

生成 tailwind.config.js 文件，以下命令在项目根目录创建一个最小化的 tailwind.config.js 文件

npx tailwindcss-cli@latest init

配置tailwind.config.js文件

// tailwind.config.js
  module.exports = {
    purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
    darkMode: false, // or 'media' or 'class'
    theme: {
      extend: {},
    },
    variants: {
      extend: {},
    },
    plugins: [],
  }

在/src/index.css中引入tailwind文件

/* ./src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

在/src/index.js中全局导入样式

  // src/index.js
  import React from 'react';
  import ReactDOM from 'react-dom';
  import './index.css';
  import App from './App';

  ReactDOM.render(
    <React.StrictMode>
      <App />
    </React.StrictMode>,
    document.getElementById('root')
  );

使用

function Login(){
    return (<div>
        <div className='text-[red] text-2xl'>是否导入tailwindcss</div>
    </div>)
}

export default Login;