Question

Setting up Tailwind CSS in an Astro project.

1. Create your project

   Start by creating a new Astro project if you don't have one set up already. The most common approach is to use create astro.

   Terminal

   npm create astro@latest my-projectcd my-project

2. Install Tailwind CSS

   Run the astro add command to install both tailwindcss and @astro/tailwind as well as generate a tailwind.config.cjs file.

   Terminal

   npx astro add tailwind

3. Start your build process

   Run your build process with npm run dev.

   Terminal

   npm run dev

4. Start using Tailwind in your project

   Start using Tailwind's utility classes to style your content.

   index.astro

   <h1 class="text-3xl font-bold underline">
     Hello world!
   </h1>