Commands
npm create astro@latest
npx astro add tailwind
This is added to src/layouts/Layout.astro
import "../styles/global.css";
Tailwind styles added to index.astro do not apply styles:
<h1 class="text-3xl font-bold underline">Hello world!</h1>
#Tailwind styles are not applying on a freshly installed project.
dire marlin
fervent pumiceBOT
Hi @dire marlin. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
I'll help you troubleshoot why your Tailwind styles aren't applying in your Astro project.
Based on the information provided, there are a few potential issues to check:
Check your global.css file
Make sure your src/styles/global.css file properly imports Tailwind. For Tailwind 4 (latest version), your file should contain:
@import "tailwindcss";
For Tailwind 3 (legacy), it should include the Tailwind directives:
@tailwind base;
@tailwind components;
@tailwind utilities;
Verify Tailwind configuration
Ensure you have a proper Tailwind configuration file. After running npx astro add tailwind, you should have a tailwind.config.mjs file in your project root with content similar to:
/** @type {import('tailwindcss').Config} */
export default {
content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
theme: {
extend: {},
},
plugins: [],
};
Check your astro.config.mjs
If you're using Tailwind 3 with the Astro integration, make sure your astro.config.mjs includes the Tailwind integration:
import { defineConfig } from 'astro/config';
import tailwind from '@astrojs/tailwind';
export default defineConfig({
integrations: [tailwind()],
});
For Tailwind 4 with the Vite plugin, your configuration might look different.
Additional troubleshooting steps
- Make sure you're importing the CSS file correctly in your layout component
- Try restarting your development server
- Check your browser console for any errors
- Verify that the HTML structure is correct and that classes are being applied to elements
If you're using Astro v5.2.0 or newer with Tailwind 4, the setup process is different from older versions with Tailwind 3, so make sure you're following the correct installation instructions for your versions.