How to use Tailwind color with custom utility class?

Question

Similar to how Tailwind does border-l and border-blue-200, how could I do this with a custom utility class? Eg. custom custom-blue-200.

At the moment I have a utility class defined like this:

@layer utilities {
    .corner-cut {
         background-image: linear-gradient(315deg, transparent 10px, rgba(255, 255, 255, 0.9) 10px);
    }
}

This has been working fine, but now I need to combine these with a color parameter in order to make the rgb part of the gradient not hard-coded to one color.

Slava Nossar · Accepted Answer · 2023-02-01 05:12:43Z

1

You need to create a plugin that defines a dynamic utility:

// tailwind.config.js
const plugin = require('tailwindcss/plugin')
const flattenColorPalette = require('tailwindcss/lib/util/flattenColorPalette').default
const { parseColor } = require('tailwindcss/lib/util/color')

module.exports = {
  plugins: [
    plugin(({ matchUtilities, theme }) => {
      matchUtilities(
        {
          'corner-cut': (value) => {
            const { color } = parseColor(value)

            return {
              backgroundImage: `linear-gradient(315deg, transparent 10px, rgba(${color[0]} ${color[1]} ${color[2]} / 0.9) 10px`,
            }
          },
        },
        { values: flattenColorPalette(theme('colors')), type: 'color' },
      )
    }),
  ]
}

You can then combine the class with a custom colour, e.g. corner-cut-blue-200.

edited Feb 1, 2023 at 5:12

answered Nov 16, 2022 at 4:03

Slava Nossar

17110 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

MagnusEffect · Accepted Answer · 2022-05-03 07:42:25Z

-1

Try to add !important to the end of each declaration yourself:

@layer utilities {
  .corner-cut {
    background-image: linear-gradient(315deg, transparent 10px, rgba(255, 255, 255, 0.9) 10px) !important;
  }
}

answered May 3, 2022 at 7:42

MagnusEffect

3,9954 gold badges28 silver badges63 bronze badges

1 Comment

Space Over a year ago

The colour needs to come from the class and not be hard-coded. Important isn't needed as it was already working.

Collectives™ on Stack Overflow

How to use Tailwind color with custom utility class?

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related