Vite+React中引入Tailwind踩坑解决办法

安装tailwindcss postcss autoprefixer

pnpm install  tailwindcss@latest postcss@latest autoprefixer@latest -D 
npx tailwindcss init

运行 npx tailwindcss init 命令后就会生成tailwind.config.js和postcss.config.js文件。

• taiwind.config.js文件

/** @type {import('tailwindcss').Config} */
export default {
  content: ['./index.html', './src/*.{vue,js,ts,jsx,tsx}', './src/**/*.{vue,js,ts,jsx,tsx}', '../../components/**/*.{vue,js,ts,jsx,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
}

• postcss.config.js文件

module.exports = {
	plugins: {
		'postcss-nested': {},
		// 允许scss中，进行嵌套的类名写法
		'tailwindcss/nesting': 'postcss-nesting',
		tailwindcss: {},
		autoprefixer: {}
	}
}

最后需要在vite.config.ts文件中添加代码

import {defineConfig} from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from "tailwindcss"
import autoprefixer from "autoprefixer"

export default defineConfig({
    plugins: [react()],
    css: {
        postcss: {
            plugins: [
                tailwindcss,
                autoprefixer,
            ]
        }
    }
})

在src目录下assets/css/base/tailwind.css文件

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

最后在main.tsx中引入src/assets/css/base/tailwind.css文件

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.tsx'
 import './assets/css/base/tailwind.css'

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)

在App.tsx中使用

function App() {

  return (
    <>
      <div className='underline font-bold'>测试</div>
    </>
  )
}

export default App

官网地址

Tailwind Css 官网
https://www.tailwindcss.cn/