reactjs Tailwind CSS不适用于react应用程序-无影响

vwoqyblh 于 2023-05-06 发布在 React

关注(0)|答案(3)|浏览(156)

我试图使用npx create-react-app myappcd my app创建一个react网站，后来我按照tailwind css上提到的步骤进行了如下操作：npm install -D tailwindcss postcss autoprefixer，然后是npx tailwindcss init -p，然后是this，我在tailwindconfig中添加了以下语句：

module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

后来在index.css中添加了以下内容

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

我的app.js看起来像这样：

import './index.css'

function App() {
  return (
    <div className="App">
      <h1 className='text-orange-500' >Navbar</h1>
    </div>
  );
}

export default App;

仍然顺风没有采取任何影响请帮助文件夹结构如下;

浏览器按原样显示

reactjs

来源：https://stackoverflow.com/questions/72916028/tailwind-css-does-not-work-with-react-app-no-affect

3条答案

按热度按时间

egdjgwm81#

我已经发现了问题，问题是在顺风配置，沿着我删除了postcss文件。新的顺风配置：

module.exports = {
  content: ['./src/**/*.{js,jsx,ts,tsx}'],
  theme: {
    screens: {
      sm: '640px',
      // => @media (min-width: 640px) { ... }

      md: '768px',
      // => @media (min-width: 768px) { ... }

      lg: '1024px',
      // => @media (min-width: 1024px) { ... }

      xl: '1280px',
      // => @media (min-width: 1280px) { ... }

      '2xl': '1536px',
      // => @media (min-width: 1536px) { ... }
    },
  },
  plugins: [],
};

这对我来说很有效，我仍然困惑于为什么它会发生的事实，但无论如何，它现在的工作

赞(0）回复(0）举报 2023-05-06

ztmd8pv52#

你可能对tailwind.config.js有问题，你可以试试下面的tailwind.config.js，在创建React应用程序中，组件存储在src目录中，你的目标是特定于页面和组件目录，所以使用.src/pages//，.src/pages/，.src/components//，.src/components/，可能会对你有用，给予吧。

module.exports = {
      content: [
        ".src/pages/**/*.{js,ts,jsx,tsx}",
        ".src/components/**/*.{js,ts,jsx,tsx}",
".src/components/*.{js,ts,jsx,tsx}",
".src/pages/*.{js,ts,jsx,tsx}",
      ],
      theme: {
        extend: {},
      },
      plugins: [],
    }

赞(0）回复(0）举报 2023-05-06

2guxujil3#

实际上有一个很好的视频解释了如何使用顺风CSS创建一个react应用程序。也是最近的！
https://www.youtube.com/watch?v=fhhri9lKEaY&t=21s

赞(0）回复(0）举报 2023-05-06