在我按照他们的网站完成了TailWind的安装过程后,我运行了NPM run dev,但设计仍然没有呈现.

我做的步骤:

1:NPM安装-D尾部

2:npx尾风初始化

在那之后,我更改为Tailwind.config以:

/** @type {import('tailwindcss').Config} */
export default {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}


与My index.css文件一起使用:

@tailwind base;
@tailwind components;
@tailwind utilities;

最后是我的App.jsx:

function App() {
  const [count, setCount] = useState(0)

  return (
    <>
     <h1 className="text-3xl bg-red-500 font-bold underline">
    Hello world!
  </h1>
    </>
  )
}

在做了所有这些之后,它应该可以工作了,但BG-RED-500的 colored颜色 没有显示,这表明tailwind 不起作用.

下面是我的目录如何设置的图像:

enter image description here

推荐答案

您需要在TailWind配置中包含.jsx个文件.

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

此外,安装postcss和autoprefix:

npm install -D postcss autoprefixer
npx tailwindcss init -p

Reactjs相关问答推荐

全局上下文挂钩-替代不起作用

构建next.js项目时状态不变,但在dev服务器中

单击按钮时在子元素中不显示任何内容-react

如何使数据库数据在第一次呈现时显示?

有没有一种方法可以在没有强烈动画的情况下有条件地渲染组件?

for each 子级加载父路由加载器

在动态React组件中删除事件侦听器

有没有可能在next.js和ssr中使用tsps?

MUI:在props 主题中找到的值:;错误;是[Object],而不是字符串或数字

如何在 ChartJS 中创建此图表?在 NEXTjs 和 TSX 中

使用reactrouterdom时显示"对象无效作为React子组件"错误

未捕获的运行时错误:对象作为 React 子项无效

如何防止开发人员使用 ESLint 在 React 项目中使用特定的钩子?

将 ref 转发到所有页面(路由组件)只是为了将其应用于
并具有跳过导航链接(按钮).有没有更好的办法?

在 Spring Cloud Gateway 中运行的 React SPA 页面刷新出现白标错误

在 Formik 表单中访问子组件的值

SonarCloud 代码覆盖率不适用于 Github Action

如何根据react 中的 map 功能一次只打开一个弹出窗口?

如何在 NavBar 中设置动态标题

如何判断对话框组件是否位于对话框之上?