在 Create React App 中安裝 Tailwind CSS

創(chuàng)建您的工程

如果您還沒有建立一個(gè)新的 Create React App 項(xiàng)目，請(qǐng)先創(chuàng)建一個(gè)新的項(xiàng)目。最常見的方法是使用 Create React App：

初始化 Tailwind CSS

Tailwind CSS 需要 Node.js 12.13.0 或更高版本。

通過 npm 安裝 Tailwind

安裝 Tailwind 以及其它依賴項(xiàng):

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

安裝和配置 CRACO

由于 Create React App 不能讓您覆蓋原生的 PostCSS 配置，所以我們還需要安裝 CRACO 才能配置 Tailwind。

npm install @craco/craco

安裝完畢后，更新 ?package.json? 文件中的 ?scripts?，將 ?eject ?以外的所有腳本都用 ?craco ?代替 ?react-scripts?。

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

接下來，在項(xiàng)目根部創(chuàng)建一個(gè) ?craco.config.js?，并添加 ?tailwindcss ?和 ?autoprefixer ?作為 PostCSS 插件。

創(chuàng)建您的配置文件

接下來，生成您的 ?tailwind.config.js? 文件：

npx tailwindcss-cli@latest init

這將會(huì)在您的項(xiàng)目根目錄創(chuàng)建一個(gè)最小化的 ?tailwind.config.js? 文件：

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

配置 Tailwind 來移除生產(chǎn)環(huán)境下沒有使用到的樣式聲明

在您的 ?tailwind.config.js? 文件中，配置 ?purge ?選項(xiàng)指定所有的 components 文件，使得 Tailwind 可以在生產(chǎn)構(gòu)建中對(duì)未使用的樣式進(jìn)行搖樹優(yōu)化。

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

在您的 CSS 中引入 Tailwind

打開 Create React App 默認(rèn)為您生成的 ./src/index.css 文件 并使用 ?@tailwind? 指令來包含 Tailwind的 ?base?、 ?components ?和 ?utilities ?樣式，來替換掉原來的文件內(nèi)容。

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

Tailwind 會(huì)在構(gòu)建時(shí)將這些指令轉(zhuǎn)換成所有基于您配置的設(shè)計(jì)系統(tǒng)生成的樣式文件。

最后，確保您的 CSS 文件被導(dǎo)入到您的 ?./src/index.js? 文件中。

    // 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')
    );

  // ...

您已經(jīng)完成了所有步驟！現(xiàn)在，當(dāng)您運(yùn)行 ?npm run start?, Tailwind CSS 就可以在您的 Create React App 項(xiàng)目中使用了。