React配置Tailwindcss

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

1.步骤

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就配置完成了，下面进行简单测试。

import React from 'react'

function App() {
  return (
    <button className="bg-blue-500 text-white font-bold py-2 px-4 rounded">
      Click Me
    </button>
  )
}

export default App

出现一下效果，证明已经配置完成