[Astro] Set up a new Astro project with Tailwind CSS

1. Use the Astro create CLI command, specifying that you want Tailwind added, and follow the wizard to generate a project.

   npm

   npm create astro@latest -- --add tailwind

   yarn

   yarn create astro@latest --add tailwind

   pnpm

   pnpm create astro@latest --add tailwind

   Tip

   For Astro prerequisites and more: https://docs.astro.build/en/install-and-setup/

2. Depending on which template you selected when creating the project, you may need to import the stylesheet into your layout component, to make sure Tailwind styles are applied to all pages using that layout. Example:

   src/layouts/Layout.astro

   ---
   import "../styles/global.css";
   ---

   Docs

   https://docs.astro.build/en/guides/styling/#tailwind

3. Navigate into the project directory and start the development server.

   cd <project-name>

   npm

   npm run dev

   yarn

   yarn run dev

   pnpm

   pnpm run dev

Alternative: official Astro with Tailwind template

You can also use the official “Astro with Tailwind” template.

npm

npm create astro@latest -- --template with-tailwindcss

yarn

yarn create astro@latest --template with-tailwindcss

pnpm

pnpm create astro@latest --template with-tailwindcss

Note

This comes with some Tailwind styled example content which you will need to remove or modify.