With CSS, you can control the color, font, the size of text, the spacing between elements, how elements are positioned and laid out, what background images or background colors are to be used, different displays for different devices and screen sizes, and much more!
Tip: The word cascading means that a style applied to a parent element will also apply to all children elements within the parent. So, if you set the color of the body text to "blue", all headings, paragraphs, and other text elements within the body will also get the same color (unless you specify something else)!
Using CSS
CSS can be added to HTML documents in 3 ways:
- Inline - by using the style attribute inside HTML elements
- Internal - by using a
This is a heading
This is a paragraph.
Try it Yourself »External CSS
An external style sheet is used to define the style for many HTML pages.
To use an external style sheet, add a link to it in the section of each HTML page:
Example
This is a heading
This is a paragraph.
Try it Yourself »The external style sheet can be written in any text editor. The file must not contain any HTML code, and must be saved with a .css extension.
Here is what the "styles.css" file looks like:
"styles.css":
body {
background-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}Tip: With an external style sheet, you can change the look of an entire web site, by changing one file!
CSS Colors, Fonts and Sizes
Here, we will demonstrate some commonly used CSS properties. You will learn more about them later.
The CSS color property defines the text color to be used.
The CSS font-family property defines the font to be used.
The CSS font-size property defines the text size to be used.
Example
Use of CSS color, font-family and font-size properties:
This is a headingThis is a paragraph.
Try it Yourself »CSS Border
The CSS border property defines a border around an HTML element.
Tip: You can define a border for nearly all HTML elements.
Example
Use of CSS border property:
p {
Try it Yourself »
border: 2px solid powderblue;
}CSS Padding
The CSS padding property defines a padding (space) between the text and the border.
Example
Use of CSS border and padding properties:
p {
Try it Yourself »
border: 2px solid powderblue;
padding: 30px;
}CSS Margin
The CSS margin property defines a margin (space) outside the border.
Example
Use of CSS border and margin properties:
p {
Try it Yourself »
border: 2px solid powderblue;
margin: 50px;
}Link to External CSS
External style sheets can be referenced with a full URL or with a path relative to the current web page.
Often the biggest challenge when working with a framework is figuring out what you’re supposed to do when there’s something you need that the framework doesn’t handle for you.
Tailwind has been designed from the ground up to be extensible and customizable, so that no matter what you’re building you never feel like you’re fighting the framework.
This guide covers topics like customizing your design tokens, how to break out of those constraints when necessary, adding your own custom CSS, and extending the framework with plugins.
Customizing your theme
If you want to change things like your color palette, spacing scale, typography scale, or breakpoints, add your customizations to the theme section of your
-
{#each items as item}
- {item} {/each}
module.exports = { theme: { screens: { sm: '480px', md: '768px', lg: '976px', xl: '1440px', }, colors: { 'blue': '#1fb6ff', 'pink': '#ff49db', 'orange': '#ff7849', 'green': '#13ce66', 'gray-dark': '#273444', 'gray': '#8492a6', 'gray-light': '#d3dce6', }, fontFamily: { sans: ['Graphik', 'sans-serif'], serif: ['Merriweather', 'serif'], }, extend: { spacing: { '128': '32rem', '144': '36rem', }, borderRadius: { '4xl': '2rem', } } } }
Learn more about customizing your theme in the Theme Configuration documentation.
Using arbitrary values
While you can usually build the bulk of a well-crafted design using a constrained set of design tokens, once in a while you need to break out of those constraints to get things pixel-perfect.
When you find yourself really needing something like
-
{#each items as item}
- {item} {/each}
This is basically like inline styles, with the major benefit that you can combine it with interactive modifiers like
-
{#each items as item}
- {item} {/each}
-
{#each items as item}
- {item} {/each}
This works for everything in the framework, including things like background colors, font sizes, pseudo-element content, and more:
It’s even possible to use the to reference the design tokens in your
-
{#each items as item}
- {item} {/each}
Arbitrary properties
If you ever need to use a CSS property that Tailwind doesn’t include a utility for out of the box, you can also use square bracket notation to write completely arbitrary CSS:
This is really like inline styles, but again with the benefit that you can use modifiers:
This can be useful for things like CSS variables as well, especially when they need to change under different conditions:
Arbitrary variants
Arbitrary variants are like arbitrary values but for doing on-the-fly selector modification, like you can with built-in pseudo-class variants like
-
{#each items as item}
- {item} {/each}
-
{#each items as item}
- {item} {/each}
-
{#each items as item}
- {item} {/each}
Learn more in the documentation.
Handling whitespace
When an arbitrary value needs to contain a space, use an underscore (
-
{#each items as item}
- {item} {/each}
In situations where underscores are common but spaces are invalid, Tailwind will preserve the underscore instead of converting it to a space, for example in URLs:
In the rare case that you actually need to use an underscore but it’s ambiguous because a space is valid as well, escape the underscore with a backslash and Tailwind won’t convert it to a space:
If you’re using something like JSX where the backslash is stripped from the rendered HTML, use String.raw() so the backslash isn’t treated as a JavaScript escape character:
Resolving ambiguities
Many utilities in Tailwind share a common namespace but map to different CSS properties. For example
-
{#each items as item}
- {item} {/each}
When using arbitrary values, Tailwind can generally handle this ambiguity automatically based on the value you pass in:
Sometimes it really is ambiguous though, for example when using CSS variables:
...
In these situations, you can “hint” the underlying type to Tailwind by adding a CSS data type before the value:
Using CSS and @layer
When you need to add truly custom CSS rules to a Tailwind project, the easiest approach is to just add the custom CSS to your stylesheet:
For more power, you can also use the
In CSS, the order of the rules in your stylesheet decides which declaration wins when two selectors have the same specificity:
Here, both buttons will be black since
To manage this, Tailwind organizes the styles it generates into three different “layers” — a concept popularized by .
- The
- The
- The
Being explicit about this makes it easier to understand how your styles will interact with each other, and using the
The
...
5 directive, and also enables features like and for your own custom CSS.Adding base styles
If you just want to set some defaults for the page (like the text color, background color, or font family), the easiest option is just adding some classes to the
...
6 or...
7 elements:This keeps your base styling decisions in your markup alongside all of your other styles, instead of hiding them in a separate file.
If you want to add your own default base styles for specific HTML elements, use the
Use the function or directive when adding custom base styles if you want to refer to any of the values defined in your theme.
Adding component classes
Use the
Traditionally these would be classes like ... ...3, ... ...4, ... ...5 — that kind of thing.
By defining component classes in the
Using Tailwind you probably don’t need these types of classes as often as you think. Read our guide on Reusing Styles for our recommendations.
The
Use the function or directive when adding custom component styles if you want to refer to any of the values defined in your theme.
Adding custom utilities
Add any of your own custom utility classes to Tailwind’s
@tailwind base; @tailwind components; @tailwind utilities; @layer utilities { .content-auto { content-visibility: auto; } }
This can be useful when there’s a CSS feature you’d like to use in your project that Tailwind doesn’t include utilities for out of the box.
Using modifiers with custom CSS
Any custom styles you add to Tailwind with
@tailwind base; @tailwind components; @tailwind utilities; @layer utilities { .content-auto { content-visibility: auto; } }
Learn more about how these modifiers work in the Hover, Focus, and Other States documentation.
Removing unused custom CSS
Any custom styles you add to the
If you want to add some custom CSS that should always be included, add it to your stylesheet without using the
Make sure to put your custom styles where they need to go to get the precedence behavior you want. In the example above, we’ve added the @tailwind base; @tailwind components; @tailwind utilities; @layer utilities { .content-auto { content-visibility: auto; } }6 class before @tailwind base; @tailwind components; @tailwind utilities; @layer utilities { .content-auto { content-visibility: auto; } }7 to make sure utilities can still override it.
Using multiple CSS files
If you are writing a lot of CSS and organizing it into multiple files, make sure those files are combined into a single stylesheet before processing them with Tailwind, or you’ll see errors about using
...
5 directive.The easiest way to do this is using the postcss-import plugin:
module.exports = { plugins: { 'postcss-import': {}, tailwindcss: {}, autoprefixer: {}, } }
Learn more in our documentation.
Layers and per-component CSS
Component frameworks like Vue and Svelte support adding per-component styles within a @tailwind base; @tailwind components; @tailwind utilities; @layer utilities { .content-auto { content-visibility: auto; } }0
You lose the ability to control the precedence of your styles, but unfortunately that’s totally out of our control because of how these tools work.
Our recommendation is that you just don’t use component styles like this at all and instead use Tailwind the way it’s intended to be used — as a single global stylesheet where you use the classes directly in your HTML:
Use Tailwind's utilities instead of component styles
Writing plugins
You can also add custom styles to your project using Tailwind’s plugin system instead of using a CSS file: