CODEWITHSUNDEEP
htmlcssreactjstailwind-css
Yash
Yash

Reputation: 11

How to reflect the custom text-color declared in Tailwind css config file to the index.css file?

index.css

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

@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300&display=swap');
@layer base{
  body{
    @apply font-[lato] 
 }
  
}

tailwind.config.js

module.exports = {
  content: ["./src/**/*.{html,jsx,js}",'node_modules/flowbite-react/**/*.{js,jsx,ts,tsx}'],
  theme: {
    extend: {
      colors: {
      'navblue': '#AEB9C7', 'black-variant': '#42505D',
    },
    padding: {
      '9' : '7rem',
    },
    margin: {
      '9' : '7rem',
    },
    dropShadow: {
      '3xl' : '0px 10px 10px 0px rgba(0 0 0/0.06)',
    }

  },
  },
  plugins: [require('flowbite/plugin'),],
}

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

@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300&display=swap');
@layer base{
  body{
    @apply font-[lato] text-[black-variant]

  }
  
}

As I added @apply font-[lato] to the body in the same way I tried to apply the custom text-[black-variant] to the body but I am not able to see any changes. How should I do the same?

Upvotes: 1

Views: 2396

Answers (1)

ChenBr
ChenBr

Reputation: 2612

You were almost there. Remove the brackets around your black-variant. Instead of applying text-[black-variant], switch it with text-black-variant.

You can see here how custom colors work in Tailwind. But custom utilities generally don't need brackets if they're defined in your tailwind.config.js.

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

@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300&display=swap');
@layer base{
  body{
    @apply font-[lato] text-black-variant
  }
}

Here's a working Tailwind-play. I changed the color to red so the change will be more noticeable.

If you want to get rid of the brackets around your font-[lato], you can define the font inside your tailwind.config.js as well:

tailwind.config.js:

module.exports = {
  content: ['./src/**/*.{html,jsx,js}', 'node_modules/flowbite-react/**/*.{js,jsx,ts,tsx}'],
  theme: {
    extend: {
      colors: {
        navblue: '#AEB9C7',
        'black-variant': 'red',
      },
      padding: {
        9: '7rem',
      },
      margin: {
        9: '7rem',
      },
      dropShadow: {
        '3xl': '0px 10px 10px 0px rgba(0 0 0/0.06)',
      },
      fontFamily: {
        lato: ['lato'],
      },
    },
  },
  plugins: [require('flowbite/plugin')],
}

Remove the brackets and import the font in index.css:

@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300&display=swap');

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


@layer base{
  body{
    @apply font-lato text-black-variant
  }
}

Tailwind-play.

Upvotes: 2

Related Questions