Tailwind CSS与React App不起作用 - 无影响

发布于 2025-02-14 02:13:26 字数 1128 浏览 0 评论 0原文

我正在尝试使用React网站使用 NPX Create-React-app myApp CD我的应用程序 后来，我按照如下尾风CSS上提到的步骤遵循： NPM安装-D tailwindcss Postcss autoprefixer 进而 NPX TailWindCSS INIT -P 随后，我在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;

仍然没有任何影响，请帮助文件夹结构如下；

浏览器显示为

原文

I am trying to create a react website using
npx create-react-app myapp
cd my app
later i followed the steps as per mentioned on tailwind css that are as followed:
npm install -D tailwindcss postcss autoprefixer
and then
npx tailwindcss init -p
followed by this i added the following statement to tailwindconfig:

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

later added the following to index .css

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

my app.js looked like following:

import './index.css'

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

export default App;

still the tailwind is not taking any affect please help
folder structure is as followed;

the browser displays as it is

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

薯片软お妹 2025-02-21 02:13:26

我发现这个问题是在尾风配置中，并且我删除了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: [],
};

这对我有用

I have found the issue the issue was in tailwind config and along with that i deleted the postcss file. The new tailwind config:

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: [],
};

this worked for me still i am confused over the fact why it happened but anyways its working now

回复收藏 0 原文

笔落惊风雨 2025-02-21 02:13:26

您可能会遇到tailwind.config.js的问题，您可以尝试以下tailwind.config.js，在Create React应用中，组件存储在SRC目录中，并且您的目标是针对页面和组件目录，因此请与.src一起使用.src /pages//，.src/pages/，.src/components//， .src/组件/，可以使用您，请尝试一下。

    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: [],
    }

You might be having issue with tailwind.config.js can you try the below tailwind.config.js, In Create React App, the components are stored in src directory and you are targeting specific to pages and components directory, so going with .src/pages//, .src/pages/, .src/components//, .src/components/, may work you, Give it a try.

    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 原文