记录一下在react项目中使用tailwind.css

1.安装tailwind，然后创建 tailwind.config.js 配置文件。

npm install -D tailwindcss
npx tailwindcss init

2.在 tailwind.config.js 配置文件中添加所有模板文件的路径

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

3.根目录创建tailwindcss.css文件,将加载 Tailwind 的指令添加到 CSS 文件中

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

4.在index.js文件中引入tailwindcss.css文件

import React from 'react'
import ReactDOM from 'react-dom/client'
import { Provider } from 'react-redux'
import 'antd/dist/antd.min.css'

import App from './App'
import store from './store'
import 'cesium/Widgets/widgets.css' //解决cesium页面混乱问题
import '../tailwindcss.css'
process.env.NODE_ENV === 'development' && require('../mock/index')

//render to Page
const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(
  // <React.StrictMode>
  <Provider store={store}>
    <App />
  </Provider>
  // </React.StrictMode>
)

5.使用

        <div className="h-32 w-32 bg-gray-800	"> 测试taiwild</div>