Tailwind custom css

tailwindcss

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.




Other Article on Tag tailwind

  1. - Tailwind add padding in t-head and body
  2. - Tailwind Breadcrumb style example
  3. - Tailwind button group style example
  4. - Tailwind button style example
  5. - Tailwind card component example
  6. - Tailwind create component in an Angular project
  7. - Tailwind CSS accordion style example
  8. - Tailwind CSS advantages and disadvantages
  9. - Tailwind CSS dropdown style example
  10. - Tailwind CSS install to angular
Show All

Other Article on Tag css

  1. - css audio
  2. - CSS Backgrounds
  3. - CSS Borders
  4. - CSS Colors
  5. - CSS Cursors
  6. - CSS Dimension
  7. - css dropdown
  8. - css ellipsis
  9. - css em vs rem
  10. - CSS flex
Show All


All Tags

reactcakephpjavascriptjqueryjavaangularsemantic-uibootstrapscullyapachenodejsprogrammingdockerlaravelspringbootcodeigniterhtmlrediscssneo4jfacebooknextjsnestjsnexusubuntuipfsjpapostgresqlmysqlbitcoinquantumtailwindbulmaxtzethprometheusgrafanaknowledge