CODEWITHSUNDEEP
tailwind-css
aitor
aitor

Reputation: 2735

tailwind default background colors doesn't work in a new project

I've installed tailwind in a new project and seems work fine. When I try to apply a background black color to the body it works:

<body class="bg-black">

But when I try to apply another default color it doesn't work:

<body class="bg-slate-500">

Why? How can I add the default color palete to bg utility classes?

//tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    colors: {
      
    },
    extend: {},
  },
  plugins: [
    require('@tailwindcss/typography'),
  ],
}

Tailwind 3.1.4 Here is the project repo

Upvotes: 2

Views: 6461

Answers (3)

Mateusz Budzisz
Mateusz Budzisz

Reputation: 729

To get rid of deprecated warnings, you may manually remove deprecated colors:

/** @type {import('tailwindcss').Config} */

const colors = require('tailwindcss/colors')

delete colors['lightBlue'];
delete colors['warmGray'];
delete colors['trueGray'];
delete colors['coolGray'];
delete colors['blueGray'];

module.exports = {
  content: ['./src/**/*.{js,ts,jsx,tsx,mdx}'],
  darkMode: 'media',
  theme: {
    extend: {
      colors
    },
  },
  plugins: [],
};

Upvotes: 0

peytoncas
peytoncas

Reputation: 953

You'll want to either define a colors object that pick which color palettes you want/need or simply import the default colors in your tailwind.config.js.

config.colors = require('tailwindcss/colors')

https://tailwindcss.com/docs/customizing-colors#using-the-default-colors

Update 2

As asked, I'm including a full example of where to include the imported colors in the Tailwind CSS config file.

/** @type {import('tailwindcss').Config} */
const colors = require('tailwindcss/colors')

module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [
    require('@tailwindcss/typography'),
  ],
}

Upvotes: 2

muyah
muyah

Reputation: 176

try using className instead of class

Upvotes: 0

Related Questions