Astro: CSS in Astro

Let’s now see how to include CSS in your Astro site.

We’ve seen that in .astro components we can add a <style> tag, and inside it we can write CSS that is scoped to the component.




If you want, you can make those styles global using

<style is:global>



You can import a .css file in the component frontmatter:

import '../styles.css'

or by including them in your <html> page structure, in the layout for example:

    <link rel="stylesheet" href="/styles.css" />

In this case the CSS file needs to be in the public folder.

To use Tailwind CSS, run the command

npx astro add tailwind

and Astro will install it and add a tailwind.config.mjs file in the site root, already configured for Astro:

/** @type {import('tailwindcss').Config} */
export default {
	content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
	theme: {
		extend: {},
	plugins: [],

and it will configure astro.config.mjs to include Tailwind CSS support in the Astro configuration:

import { defineConfig } from 'astro/config';

import tailwind from "@astrojs/tailwind";

export default defineConfig({
  integrations: [tailwind()]

That’s it.

You can now use Tailwind classes in your pages and layouts!

One Astro feature you might like, with Tailwind, is the ability to conditionally add classes based on component variables, including props:

const { white } = Astro.props
<div class:list={['bg-black', { 'bg-white': white }]}>

In this case passing white={true} to this component will make the background white, otherwise it’s black.

Lessons in this unit:

0: Introduction
1: Your first Astro site
2: The structure of an Astro site
3: Astro components
4: Adding more pages
5: Dynamic routing
6: Markdown in Astro
7: Images
8: Content collections
9: ▶︎ CSS in Astro
10: JavaScript in Astro
11: Client-side routing and view transitions
12: SSR in Astro
13: API endpoints in Astro