0

Is there a way to assign custom colors in a way that allows Tailwind to generate meaningful semantic names?

For example, I'd like to have a collection of success colors that can be applied like this:

  • bg-success => Tailwind generates #F6FFED behind the scene
  • border-success => Tailwind generates #B7EB8F
  • text-success => Tailwind generates #135200
  • ... and so on

Update

Here's what I ended up doing but not sure if it's the best approach.

module.exports = {
  content: [...],
  theme: {
    extend: {
      backgroundColor: ({ theme }) => ({
        error: theme('colors.red.100'),
        info: theme('colors.blue.100'),
        success: theme('colors.green.100'),
        warning: theme('colors.gold.100'),
      }),
      borderColor: ({ theme }) => ({
        error: theme('colors.red.300'),
        info: theme('colors.blue.300'),
        success: theme('colors.green.300'),
        warning: theme('colors.gold.300'),
      }),
      textColor: ({ theme }) => ({
        error: theme('colors.red.900'),
        info: theme('colors.blue.900'),
        success: theme('colors.green.900'),
        warning: theme('colors.gold.900'),
      }),
    },
  },
  plugins: [...],
}

With that implementation, I am able to then recall generated colors I outlined in my question above.

  <div class="bg-success border-success text-success border-2">
    Hello world!
  </div>

But again, I'm not sure if this is the best approach.

poweratom
  • 2,270
  • 23
  • 25

1 Answers1

0

Yes, all you need to do is update your tailwind.config.js file and extend the colors with your custom color needs. Here's an example of what you may be trying to do:

// tailwind.config.js
module.exports = {
  extend: {
    colors: {
      'success': '#00FF00',
    },
  },
}

And then in your markup, you can do things like

<div class="bg-success"> ABCD </div> or <p class="text-success"> Hello World! </p>.

Should definitely work!

eYinka
  • 86
  • 4
  • Thanks for the response. But it's not quite what I was asking. Notice in my question, I specified that `bg-success` and `text-success` each should produce a different color. The standard documented color extension doesn't do that. – poweratom Aug 22 '23 at 19:54