使用 React 和 Vite 设置时,Tailwind CSS 不应用样式

问题描述 投票:0回答:1
我用

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: {}, }, }
这是包含完整项目文件的存储库:

Tailwind Test

reactjs tailwind-css vite postcss
1个回答
0
投票
最后发现问题出在tailwind.config.js文件上。在内容数组中,

js位于jsx之前,这阻碍了它应该做的事情。

我不明白的一件事是,我认为既然列出了它们,Tailwind 就应该选择适用于它的一个(即

jsx)。为什么我要先清除前面的js才能起作用?

最新问题
© www.soinside.com 2019 - 2025. All rights reserved.