Tailwind custom css


Tailwind CSS is a utility-first CSS framework, which means that it provides a set of low-level utility classes that you can use to style your HTML elements directly. Instead of writing custom CSS styles, you can use these utility classes to apply styles to your elements in a more modular and composable way.

For example, instead of writing a custom style to set the font size and color of a heading, you can use utility classes like text-2xl text-indigo-500:

<h1 class="text-2xl text-indigo-500">My Heading</h1>

You can use these utility classes to style almost any aspect of your HTML elements, including layout, typography, colors, borders, and more.

However, if you want to add custom styles that are not provided by the default set of utility classes, you can use the @apply directive in your CSS to extend the utility classes with your own styles. For example:

.my-custom-style {
    @apply font-serif text-xl mb-4;

This will create a new class called my-custom-style that combines the styles from the font-serif, text-xl, and mb-4 utility classes, as well as any additional styles you define in the .my-custom-style rule. You can then use this class in your HTML like any other class:

<p class="my-custom-style">My paragraph</p>

Keep in mind that the @apply directive is a custom feature of Tailwind CSS, and is not part of the standard CSS syntax. It is designed to make it easier to extend and customize the utility classes provided by Tailwind CSS.