How to use Tailwind CSS in Astro

This content originally appeared on DEV Community and was authored by Chris Bongers

To be honest, it's never been easier to include Tailwind CSS in a framework.

Why? Astro has build in support for Tailwind! ?
And yes, even the Tailwind JIT compiler.

I'll write down this quick guide to get you started setting up Tailwind CSS in an Astro project.

Installing Tailwind CSS in an Astro project

Let's start with a basic Astro project.

mkdir astro-tailwind && cd astro-tailwind
npm init astro

You can choose any of the templates. It doesn't matter, actually.

Now let's install Tailwind CSS.

npm install -D tailwindcss

The next step is to create a tailwind.config.js file to tell Tailwind which files to purge and enable the JIT compiler.

module.exports = {
  mode: 'jit',
  purge: ['./public/**/*.html', './src/**/*.{astro,js,jsx,ts,tsx,vue}'],
};

Then we can Astro that it should use this Tailwind config file by modifying the astro.config.js file and add this to the devOptions section.

devOptions: {
  tailwindConfig: './tailwind.config.js';
}

Now edit the global.css file in the public/style directory.

@tailwind base;
@tailwind components;
@tailwind utilities;

Let's modify our src/pages/index.astro to test out how it works.

<div class="bg-gradient-to-br from-indigo-900 to-green-900 min-h-screen overflow-auto">
  <div class="container max-w-5xl mx-auto px-4">
    <div class="w-4/5 mx-auto">
      <h1 class="mt-32 text-white text-6xl font-bold">
        <img width="60" height="80" src="/assets/logo.svg" alt="Astro logo" /> Welcome to
        <a href="https://astro.build/">Astro</a>
      </h1>
    </div>
    <div class="w-4/5 my-10 mx-auto">
      <h3 class="text-gray-300">
        Build faster websites with less
        <strong class="text-white">client-side Javascript</strong>
        <br />
        This is how easy it is to get started
      </h3>
    </div>
    <div class="w-2/5 mx-auto bg-black text-white p-10 leading-10 rounded-2xl shadow-lg">
      mkdir astro<br />
      cd astro<br />
      npm init astro
    </div>
  </div>
</div>

And this results in the following:

You can also download this project from GitHub.

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

This content originally appeared on DEV Community and was authored by Chris Bongers

Print Share Comment Cite Upload Translate Updates

APA

Chris Bongers | Sciencx (2021-07-25T07:35:13+00:00) How to use Tailwind CSS in Astro. Retrieved from https://www.scien.cx/2021/07/25/how-to-use-tailwind-css-in-astro/

MLA

" » How to use Tailwind CSS in Astro." Chris Bongers | Sciencx - Sunday July 25, 2021, https://www.scien.cx/2021/07/25/how-to-use-tailwind-css-in-astro/

HARVARD

Chris Bongers | Sciencx Sunday July 25, 2021 » How to use Tailwind CSS in Astro., viewed ,<https://www.scien.cx/2021/07/25/how-to-use-tailwind-css-in-astro/>

VANCOUVER

Chris Bongers | Sciencx - » How to use Tailwind CSS in Astro. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/07/25/how-to-use-tailwind-css-in-astro/

CHICAGO

" » How to use Tailwind CSS in Astro." Chris Bongers | Sciencx - Accessed . https://www.scien.cx/2021/07/25/how-to-use-tailwind-css-in-astro/

IEEE

" » How to use Tailwind CSS in Astro." Chris Bongers | Sciencx [Online]. Available: https://www.scien.cx/2021/07/25/how-to-use-tailwind-css-in-astro/. [Accessed: ]

rf:citation

» How to use Tailwind CSS in Astro | Chris Bongers | Sciencx | https://www.scien.cx/2021/07/25/how-to-use-tailwind-css-in-astro/ |

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Installing Tailwind CSS in an Astro project

Thank you for reading, and let's connect!

Related Posts