raj
Integrate Tailwind CSS with Astro

Integrate Tailwind CSS with Astro

Scroll 👇
Table of contents
  1. 1. Install Astro and get it running
  2. 2. Install Tailwind CSS in astro project.
  3. 3. Test Tailwind CSS
  4. 4. Next Steps
facebook twitter linkedin whatsapp

1. Install Astro and get it running

Navigate to the folder where you store your projects, like ~/Desktop, in your terminal and run the command. 

npm create astro@latest

It will ask you to specify the location for your new project. For example, enter "./astro-tailwind" to create the "astro-tailwind" folder and set up Astro inside it. Open "astro-tailwind" with the following command. 

code astro-tailwind
The above command only works when you have vs code installed.

Once opened in the code editor, you'll find files and folders in your project. To open the terminal, use Ctrl + `. Then, run the following command to start your development server. Astro provides some UI by default. You should see it once your server is up and running. I'll share a screen capture for reference and this UI may change in future.

npm run dev

Visit your localhost, and access the astro pre populated dashboard. It should show something like this.

2. Install Tailwind CSS in astro project.

If your terminal is running local server, exit using Ctrl + C, then run the following command to install tailwind. 

npx astro add tailwind

This will do 2 things.

  1. Creates a tailwind.config.mjs file in your project's root directory.
  2. Integrates tailwind() in astro.config.mjs file.

That's it. Manual installation and configuration are unnecessary. Refer to this documentation if interested.

3. Test Tailwind CSS

Now let's cleanup your index.astro file from your src/pages folder. Navigate to src/pages/index.astro and remove everything except Layout wrapper and add h1 tag with tailwind classes. Your index.astro file should now look something like this. 

---
import Layout from '../layouts/Layout.astro';
---

<Layout title="Welcome to Astro.">
	<h1 class="text-white text-3xl p-10">Hello World ;)</h1>
</Layout>

To verify this, restart your development server by running this command in your terminal. 

npm run dev

Congratulations on successfully setting up Tailwind with Astro if you see a similar output. In the image above, you can observe that padding, text color, and size were applied as specified in the index.astro file for our h1 tag.

4. Next Steps

Explore additional functionalities with Tailwind config: extend styles, incorporate variables, install Tailwind-specific plugins, and more. For detailed information, visit the official Tailwind CSS site.

Questions? Reach out on Linkedin