React教程 第9章：tailwindcss react 配置

使用React脚手架创建项目

npx create-react-app my-project
cd my-project

使用craco配置Tailwind

由于Create React App本身不允许本地覆盖PostCSS配置，因此我们还需要安装CRACO才能配置Tailwind：

npm install @craco/craco

安装完成后，将package.json文件中的脚本更新为对所有脚本使用craco,代码修改如下:

{
    "scripts": {
        "start": "craco start",
        "build": "craco build",
        "test": "craco test",
        "eject": "react-scripts eject"
    }
}

接下来，在我们项目的根目录下创建一个craco.config.js的配置文件，并将tailwindcss和autoprefixer添加为PostCSS插件：

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

创建tailwindcss的配置文件

在项目的根目录下面执行命令

npx tailwindcss init

命令将会自动创建tailwindcss的配置文件

// tailwind.config.js
module.exports = {
    purge: [],
    darkMode: false, // or 'media' or 'class'
    theme: {
        extend: {},
    },
    variants: {
        extend: {},
    },
    plugins: [],
}

优化打包配置

在tailwind.config.js文件中，在清除选项中填写需要清除的路径，以便Tailwind可以在生产版本中 tree-shaker掉未使用的样式：

// 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: [],
}

引用tailwindcss的样式到react项目中

打开Create React App默认生成的./src/index.css文件，并使用@tailwind指令引入Tailwind的基础，组件和实用程序，替换原始文件内容：

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

在react的入口文件中引用全局样式文件

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

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