Your Own Custom Classes

You're not limited to only using Tailwind classes; for some elements, you must define your classes, and we will show you how.

Open your main app.css file, and you will see the following content: resources/css/app.css:

@import 'tailwindcss';

This imports TailwindCSS.

First, you must define the @layer directive to tell Tailwind which "bucket" a set of custom classes belongs to. Tailwind will automatically move the CSS within any layer to the same place as the corresponding @tailwind rule, so you don't have to worry about authoring your CSS in a specific order.

Then, you can use the @apply directive to inline any existing tailwind classes into your custom CSS.

Let's create a custom class to style your links:

resources/css/app.css:

@import 'tailwindcss';
 
@layer components { 
    .text-link {
        @apply text-blue-500 dark:text-blue-400 font-semibold hover:underline
        inline-flex items-center gap-1;
    }
}

Then, you can apply text-link to your HTML elements.

Visit the <a href="#" class="text-link">laraveldaily.com</a>.

You can also add your own regular CSS rules. The @apply directive is needed only when you apply Tailwind classes.

resources/css/app.css

@import 'tailwindcss';
 
@layer components {
    .text-link {
        @apply text-blue-500 dark:text-blue-400 font-semibold hover:underline
            inline-flex items-center gap-1
    }
 
    .figure-text { 
        font-style: italic;
        font-size: .8rem;
    }
}

Example:

<p>Visit the <a href="#" class="text-link">laraveldaily.com</a>.</p>
<p class="figure-text">Courses in a simple language</p>

Generally, writing classes for small elements is advised instead of creating a partial view or component, which would otherwise be overkill.

Now, let's move on to the next lesson, discussing Blade components.