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>