I am transitioning from Bootstrap to Tailwind css and am facing a problem. I am using tailwind classes for background colors in my div tags but they are not being show. Please find the code attached below.

tailwind.confing.js

    export default {
  content: [
    './index.html',
    './src/**/*.{js,jsx,ts,tsx}', // Check the extensions of your React components
  ],
  safelist: [
    'bg-black-500', // Add any background color classes or other classes that you are using
    'bg-red-500',
    'bg-green-500',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

index.css

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

and App.jsx

import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'

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

  return (
    <>

     <div className="grid grid-cols-3">
     <div className='bg-black-500'>hi 1</div>
      <div className='bg-red-500'>hi</div>
      <div className="bg-green-500">hi</div>
    
     </div>
    </>
  )
}

export default App

postcss.config.cjs

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
  ],
};

I have checked using dev tools to ensure that tailwind is being detected and that background color is being purged.

I am transitioning from Bootstrap to Tailwind css and am facing a problem. I am using tailwind classes for background colors in my div tags but they are not being show. Please find the code attached below.

tailwind.confing.js

    export default {
  content: [
    './index.html',
    './src/**/*.{js,jsx,ts,tsx}', // Check the extensions of your React components
  ],
  safelist: [
    'bg-black-500', // Add any background color classes or other classes that you are using
    'bg-red-500',
    'bg-green-500',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

index.css

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

and App.jsx

import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'

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

  return (
    <>

     <div className="grid grid-cols-3">
     <div className='bg-black-500'>hi 1</div>
      <div className='bg-red-500'>hi</div>
      <div className="bg-green-500">hi</div>
    
     </div>
    </>
  )
}

export default App

postcss.config.cjs

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
  ],
};

I have checked using dev tools to ensure that tailwind is being detected and that background color is being purged.

• reactjs
• tailwind-css
• vite
• tailwind-css-3

1 Answer 1

The bg-black-500 class does not exist by default, but can found bg-black. This could cause issues during the compilation.

Either add a custom color, or review the available default color palette.

• Default Color Palette: slate, gray, zinc, neutral, stone, ... - TailwindCSS v3 Docs
• Adding additional colors - TailwindCSS v3 Docs

You can only add existing classes to the safelist; otherwise, it cannot "retain" non-existing class names, as they never existed in the first place.

export default {
  content: [
    './index.html',
    './src/**/*.{js,jsx,ts,tsx}',
  ],
  safelist: [
    'bg-black-500',
    'bg-red-500',
    'bg-green-500',
  ],
  theme: {
    extend: {
      colors: {
        black: {
          400: '#444',
          500: '#555',
          // etc.
        },
      },
    },
  },
  plugins: [],
}