Vite
设置了一个
React
项目。我还成功安装了TailwindCSS,终端中没有任何错误。我遵循了所有文档说明,但在尝试使用文档示例中的 Tailwind 类时,没有一个起作用。我最终渲染的 HTML 没有反映我在其上设置的样式。我也曾在 Google 和 Stack Overflow 上搜索过解决方案,但现在对此束手无策。
vite.config.js
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from "tailwindcss"
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
css: {
postcss: {
plugins: [tailwindcss()],
}
}
})
tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./index.html",
"./src/**/*.{js, ts, jsx, tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
index.css
@itailwind components;
@tailwind utilities;
@tailwind base;
postcss.config.js
export default {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
这是包含完整项目文件的存储库:
js位于jsx之前,这阻碍了它应该做的事情。
我不明白的一件事是,我认为既然列出了它们,Tailwind 就应该选择适用于它的一个(即jsx)。为什么我要先清除前面的js才能起作用?