Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson

Already subscribed? Sign In

Autoplay

    Keep Specificity in Check when Working with Tailwind

    Simon VrachliotisSimon Vrachliotis

    In this lesson, we learn different ways to handle specificity in Tailwind, depending on the context of your project. We look at how your should order your CSS declarations in your stylesheet, discover the “important” config option for a “utility-last” approach.

    tailwindTailwind
    cssCSS
    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    Instructor: 00:00 One of the great features of utility classes is that they are extremely low in specificity. Take this simple H2 headline with two utility classes. Say that I want to override these classes with custom CSS.

    00:13 I'll add a Hero headline class to my H2. In my CSS, I'll add some styles after my Tailwind utilities. With a simple class name, which has very low specificity, I was able to override the utility classes. Now, let's reverse the scenario.

    00:29 What if you want to use Tailwind on top of existing custom CSS in a more utility-last approach? Let's see what happens if I move my class names before Tailwind here. As you can see, my Tailwind utility classes have now taken over, because they have the same level of specificity, but are declared later in the style sheet.

    00:50 This is nice, but what if the custom CSS is more specific? Now, our utility classes are not able to override this custom CSS. Does that mean Tailwind can't be used as a utility-last framework? No, it doesn't. The Tailwind config file provides an option, at the very bottom of the file, to mark the utility classes as important.

    01:12 Setting that option to true will make sure that Tailwind utility classes always override other class names. As you can see now, all our generated utility classes are marked with important. If I set the option to false, the important disappears. Turn it back on, and it's back.

    Discuss

    Discuss