React配置Tailwindcss详细步骤

React配置Tailwindcss

简介

最近在react上配置tailwindcss时出现了一些问题，按照官网给出的文档配置完成后没有报错但css效果无法显示，在此记录最终解决方案。

步骤

1. 首先利用npx建立react项目

npx creat-react-app my_app
cd my_app

2. 利用npm安装tailwindcss，postcss，autoprefixer

npm install -D tailwindcss postcss autoprefixer

3. 创建tailwindcss以及postcss的配置文件

npx tailwindcss init -p

在完成第三步后，项目根目录下会出现两个配置文件分别是: postcss.config.js，tailwindcss.config.js

4. 打开tailwindcss.config.js，修改成如下内容:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js, jsx, ts, tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

5. 打开index.css，并替换成如下内容

@tailwind base;
@tailwind components;
@tailwind utilities;

完成以上五个步骤后，tailwindcss就配置完成了，下面进行简单测试。

测试

打开App.js，将里面的内容替换成如下代码：

import './App.css';

function App() {
  return (
    <div className="container mx-auto bg-gray-200 rounded-xl shadow border p-8 m-10">
      <p className="text-3xl text-gray-700 font-bold mb-5">
        Welcome!
      </p>
      <p className="text-gray-500 text-lg">
        Hello React and tailwindcss
      </p>
    </div>
  );
}
export default App;

根目录执行

npm start

如果一切正常，那么页面应该展示如下：