javascript - Tailwind default color classes not working - Stack Overflow

admin管理员组

文章数量:1396787

I'm building a React application using Tailwind CSS Framework. I have used NPM to install tailwind in my react app in the following manner:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Then I have also edited my tailwind.config.js file in the following manner:

module.exports = {

  content: [
  "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

And updated my index.css file in the following manner:

@tailwind base;
@tailwind ponents;
@tailwind utilities;

Then I tried to use default color classes that tailwind CSS provides in the following manner:

<h1 className='text-white'>...</h1>

Or

<div className='bg-white'>
    ...
</div>

But using this class is not changing the color of the text or the background of the div. Please, tell me how to solve this problem? Thanks in advance.

For your kind information, I can use custom color classes by writing them in the tailwind.config.js in the following manner:

module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    colors: {
      'custom-base-red': '#ff2f23',
      'custom-light-red': '#fb4a40',
      'custom-white': '#fefcfb',
      'custom-dark-gray': '#5f5f6c',
      'custom-light-gray': '#f7f7f7',
      'custom-border-gray': '#eeeeee',
      'custom-footer-bg': '#1d2124',
    },
    fontFamily: {
      'poppins': ["'Poppins'", 'sans-serif'],
    },
    dropShadow: {
      'custom-btn-shadow': '0px 5px 15px rgba(255, 47, 35, 0.4)',
    },
    extend: {},
  },
  plugins: [],
}

I'm building a React application using Tailwind CSS Framework. I have used NPM to install tailwind in my react app in the following manner:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Then I have also edited my tailwind.config.js file in the following manner:

module.exports = {

  content: [
  "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

And updated my index.css file in the following manner:

@tailwind base;
@tailwind ponents;
@tailwind utilities;

Then I tried to use default color classes that tailwind CSS provides in the following manner:

<h1 className='text-white'>...</h1>

Or

<div className='bg-white'>
    ...
</div>

But using this class is not changing the color of the text or the background of the div. Please, tell me how to solve this problem? Thanks in advance.

For your kind information, I can use custom color classes by writing them in the tailwind.config.js in the following manner:

module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    colors: {
      'custom-base-red': '#ff2f23',
      'custom-light-red': '#fb4a40',
      'custom-white': '#fefcfb',
      'custom-dark-gray': '#5f5f6c',
      'custom-light-gray': '#f7f7f7',
      'custom-border-gray': '#eeeeee',
      'custom-footer-bg': '#1d2124',
    },
    fontFamily: {
      'poppins': ["'Poppins'", 'sans-serif'],
    },
    dropShadow: {
      'custom-btn-shadow': '0px 5px 15px rgba(255, 47, 35, 0.4)',
    },
    extend: {},
  },
  plugins: [],
}

• javascript
• reactjs
• npm
• npm-install
• tailwind-css

Share Improve this question Follow edited Apr 29, 2022 at 23:22 mj aumi asked Apr 29, 2022 at 9:22 mj aumimj aumi 5311 silver badge55 bronze badges 4

• Is your react file actually in the src folder? – Aaditey Nair Commented Apr 29, 2022 at 9:29
• Yes, my react file is in the src folder. – mj aumi Commented Apr 29, 2022 at 11:55
• Your reply to an answer below says that your "custom color classes are working fine". How are you adding the custom classes? If you're adding them to your tailwind.config.js, could you show the file with those additions? – Ed Lucas Commented Apr 29, 2022 at 15:17
• Thank you for your ment. I have updated the issue with my tailwind.config.js file. Please do check it. Thank you. @EdLucas – mj aumi Commented Apr 29, 2022 at 23:24

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

Tailwind's default classes are not working because the custom ones you set in themes is overwriting them. To add custom classes move them into the extend object.

module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './ponents/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {
      colors: {
        'custom-base-red': '#ff2f23',
        'custom-light-red': '#fb4a40',
        'custom-white': '#fefcfb',
        'custom-dark-gray': '#5f5f6c',
        'custom-light-gray': '#f7f7f7',
        'custom-border-gray': '#eeeeee',
        'custom-footer-bg': '#1d2124',
      },
      fontFamily: {
        poppins: ["'Poppins'", 'sans-serif'],
      },
      dropShadow: {
        'custom-btn-shadow': '0px 5px 15px rgba(255, 47, 35, 0.4)',
      },
    },
  },
  plugins: [],
};

Check if there is import './index.css' in the index.js file.

Also, make sure that You are editing the App.js file

本文标签： javascriptTailwind default color classes not workingStack Overflow