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
@tailwind base;@tailwind components;@tailwind utilities;The @tailwind directive inserts Tailwind’s base, components, and utilities styles into your CSS.
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. Valid layers are base, components, and utilities.
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
@tailwind base;@tailwind components;@tailwind utilities; @layer components { .text-link { @apply text-primary-500 dark:text-primary-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
@tailwind base;@tailwind components;@tailwind utilities; @layer components { .text-link { @apply text-primary-500 dark:text-primary-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.