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} */
module.exports = {
  content: [
    "./index.html",
    './src/**/*.{vue,js,ts,jsx,tsx}'
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

postcss.config.js文件

export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

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

vite.config.ts

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react(),
  ],
  css: {
    postcss: {
      plugins: [
        tailwindcss, 
        autoprefixer,
      ]
    }
  }
})

在src目录下创建tailwind.css文件

tailwind.css

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

最后在main.ts中引入tailwind.css文件

import "./tailwind.css"

然后在App.tsx中替换成一下代码

import React from 'react'

export default function Home() {
  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>
  )
}

重新启动项目。看到页面变成这个样子就说明，tailwindcss引入成功了。