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.
<style>
...
</style>
If you want, you can make those styles global using
<style is:global>
...
</style>
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:
<html>
<head>
<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";
// https://astro.build/config
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 }]}>
...
</div>
In this case passing white={true} to this component will make the background white, otherwise it’s black.