Astro JS - CSS Integration

---

---

CSS in Astro

Astro framework have inbuilt support for CSS. You can use internal CSS, external CSS, and CSS preprocessors in Astro. In the last chapter, we discussed how to use the types of CSS in Astro project. In this chapter, we will discuss how to integrate Astro with other technologies like Tailwind CSS, and CSS preprocessors.

Astro Tailwind CSS Integration

Astro uses vite plugin to support Tailwind CSS. You can use Tailwind CSS in Astro by installing the plugin. The following steps show how to integrate Tailwind CSS in Astro:

Step 1: Install Tailwind CSS

First, you need to install Tailwind CSS in your Astro project. You can install Tailwind CSS using the following command:

>> npx astro add tailwind

Step 2: Import Tailwind CSS

After installing Tailwind CSS, you need to import it in your Astro project. You can import Tailwind CSS in your Astro project using the following command:

// src/styles/global.css

@tailwind base;

Step 3: Use Tailwind CSS

After importing Tailwind CSS, you can use it in your Astro project. You can use Tailwind CSS classes in your Astro project as shown below:

// src/pages/index.astro

---
import "../styles/global.css";
---
<style>
    .container {
        @apply bg-blue-500 text-white p-4;
    }
</style>

CSS Preprocessors in Astro

Astro supports CSS preprocessors like Sass, Less, and Stylus. You can use CSS preprocessors in Astro by installing the plugin. The section below shows how to install and use different CSS preprocessors in Astro.

Astro Sass Integration

To use Sass in Astro, you need to install the Sass plugin. Run the following command to install the Sass plugin in Astro:

>> npm install sass

Now, to use SASS keep "scss" as valve for lang attribute in <style> tag. Let's see an example.

// src/pages/index.astro

<style lang="scss">
    $color: blue;
    .container {
        background-color: $color;
    }
</style>

Astro Stylus Integration

To use Stylus in Astro, you need to install the Stylus plugin. Run the following command to install the Stylus plugin in Astro:

>> npm install stylus

Now, to use Stylus keep "stylus" as valve for lang attribute in <style> tag. Let's see an example.

 
// src/pages/index.astro

<style lang="stylus">
    $color = blue;
    .container {
        background-color: $color;
    }
</style>

Astro Less Integration

To use Less in Astro, you need to install the Less plugin. Run the following command to install the Less plugin in Astro:

>> npm install less

Now, to use Less keep "less" as valve for lang attribute in <style> tag. Let's see an example.

// src/pages/index.astro

<style lang="less">
    @color: blue;
    .container {
        background-color: @color;
    }
</style>