當我使用 Tailwind css 的 cdn 鏈接時，當我通過 props 傳輸時，Tailwind 類無法正常工作

Question

 //Button.jsx import React from 'react'; const Button = (props) => { let color = props.color || 'blue'; return ( <button className={`px-4 py-2 font-bold text-black bg-${color}-500 rounded-full hover:bg-${color}-700 focus:outline-none focus:shadow-outline`}> Click </button> ); }; export default Button; // App.jsx import Button from "./Button" import './index.css' function App() { return ( <div> <Button >Click me!</Button> <Button color="red">Click me!</Button> <Button color="green">Click me!</Button> </div> ) } export default App

這是我使用道具傳輸背景顏色的組件

我不知道出了什么問題...當我在 html 頁面中添加 tailwindcss 的 cdn 鏈接時，相同的代碼可以工作，但沒有 cdn 就無法工作。 如果我將 bg-red-500 整個 class 作為道具傳輸，那么它可以工作，但如果我只發送紅色作為道具，那么它就不起作用。 即使在檢查頁面中我也可以看到類，但它們沒有生效。 我正在使用 vite-react。

Answer 1

我認為你忘記了一步，你做@tailwind base; @tailwind components; @tailwind utilities; @tailwind base; @tailwind components; @tailwind utilities; 在您的主要 css 中？ 入門指南還顯示了一個額外的步驟： https://tailwindcss.com/docs/installation