在一个使用了 Sass 的 React Webpack 项目中安装和使用 Tailwind CSS

要在一个使用了 Sass 的 React Webpack 项目中安装和使用 Tailwind CSS，可以按照以下步骤操作：

1. 安装 Tailwind CSS 及其依赖

首先，确保你的项目根目录下有 package.json 文件，然后运行以下命令来安装 Tailwind CSS 及其所需的依赖：

npm install tailwindcss postcss autoprefixer
1

2. 初始化 Tailwind CSS 配置文件

运行以下命令生成 tailwind.config.js 文件：

npx tailwindcss init
1

3. 配置 Tailwind CSS

在项目根目录下创建一个 postcss.config.js 文件，并添加以下内容：

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};
1
2
3
4
5
6

4. 设置 Tailwind CSS 的入口点

在你的 src 目录中创建一个 index.css 文件，并添加以下内容：

@tailwind base;
@tailwind components;
@tailwind utilities;
1
2
3

5. 配置 Webpack

更新你的 Webpack 配置，以确保它能够处理 PostCSS 插件和 Tailwind CSS：

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        },
      },
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader',
          'postcss-loader',
        ],
      },
      {
        test: /\.s[ac]ss$/i,
        use: [
          'style-loader',
          'css-loader',
          'sass-loader',
        ],
      },
    ],
  },
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

6. 使用 Tailwind CSS 和 Sass

现在你可以在你的 React 组件中使用 Tailwind CSS 和 Sass。例如，在 App.js 中：

import React from 'react';
import './index.css'; // 导入 Tailwind CSS
import './App.scss';  // 导入 Sass 文件

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1 className="text-4xl text-blue-500">Hello, Tailwind CSS!</h1>
      </header>
    </div>
  );
}

export default App;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

在 src 目录下创建 App.scss 文件，写入一些 Sass 代码：

$primary-color: #3490dc;

.App {
  .App-header {
    background-color: $primary-color;
  }
}
1
2
3
4
5
6
7

7. 启动项目

运行以下命令启动你的项目：

npm start
1

现在你的 React 项目已经配置好，可以同时使用 Tailwind CSS 和 Sass。