Tailwind custom theme not working

Get Help and Help Others
1

Hi there,
I have installed Tailwind 2.1 and also installed tailwind using
yarn rw setup tailwind

When I made changes to the theme object in the tailwind.config.js file as below:


theme: {
    extend: {
      colors: {
        primary: {
          light: '#8d6e63',
          main: '#795548',
          dark: '#5d4037',
        },
        secondary: {
          light: '#8d6e63',
          main: '#40c4ff',
          dark: '#03a9f4',
          darker: '#0288d1',
        },
      },
    },
  },

The theme colours are not applying as I expect it to. In the vs code editor, I am able to get the css representation of the class though.

Any ideas what could be wrong?

Thanks.

2

Hi @alexofob can you confirm that your are restarting the dev server in between theme changes?

It may be that hot reloading doesn’t pick up config changes while the dev server is running.

1 Like
3

Hi @dthyresson,
I did restart the dev server a few times without any success.

4

Looking at Theme Configuration - Tailwind CSS do colors go in the extends?

5

Yeah, when you want to add your own colours, you can.
I tested it in the tailwind playfield and it works.
I also tested this in another framework and it works.

6

My tailwind.config.js file looks like this:

module.exports = {
  content: ['src/**/*.{js,jsx,ts,tsx}'],
  theme: {
    extend: {
      colors: {
        blue: {
          // colors here like 50: #F1FAF9
        },
        teal: {
          // colors here like 50: #F1FAF9
        },
        pink: {
          // colors here like 50: #F1FAF9
        },
        yellow: {
          // colors here like 50: #F1FAF9
        },
      },
    },
  },
  plugins: [require('@tailwindcss/typography'), require('@tailwindcss/forms')],
} 
// Using typography and forms for Tailwind UI

Did you use yarn rw setup ui tailwindcss ?

7

@justinkuntz , Yeah, I used rw setup ui tailwindcss
I am using tailwind 2.1, what version are you using?

8

I’m using 3.1.4. here are my dev dependencies in package.json under the Web directory.

"devDependencies": {
    "@tailwindcss/forms": "^0.5.2",
    "@tailwindcss/typography": "^0.5.2",
    "autoprefixer": "^10.4.7",
    "postcss": "^8.4.14",
    "postcss-loader": "^7.0.0",
    "tailwindcss": "^3.1.4"
  }

I also added sass loader to the dependencies but that shouldn’t make a difference. Is the rest of Tailwind working?

9

@alexofob @justinkuntz

Would there be any need to add the needed colors to the safelist also?

10

My config is working fine. I mentioned sass loader because in my index.scss file, I am extending some classes. @PantheRedEye what is the safelist?

11

Well, the docs mention safe listing as a last resort, but I had to do it for one of my components where the class names were being returned as a property from the query. It’s an option that would go at the same level as the content, theme, and plug-ins options…


module.exports = {
  content: [
    './pages/**/*.{html,js}'
    './components/**/*.{html,js}',
  ],
  safelist: [
    'bg-red-500',
    'text-3xl',
    'lg:text-4xl',
  ]
  // ...
}

It basically forces the safelisted styles to be included in the generated css.

1 Like
12

@alexofob your config is working for me. How are you using the colors in your markup? Do you have an example?

1 Like
13

@rainkinz I am using as below:

<span className="text-primary-main xl:inline">Job done</span>