Day8 - Astro Series: Tailwind integration

@ Astro

A beautiful gradient background with a title: "Integrating Tailwind"

Introduction

Tailwind is a CSS framework and learning Astro does not require it, but given its popularity in the community and the ability to quickly and flexibly apply styles, why not give it a try? Try adding Tailwind and using it to build component styles.

Integrating Tailwind

Installing and integrating Tailwind in Astro is very simple. Just run npx astro add tailwind in your project terminal and the installer will run. Once complete you can start using Tailwind across your project:

Terminal window
Astro will run the following commands:
  If you skip this step you can come back later


 ╭─────────────────────────────────────────────────╮
 │ yarn add @astrojs/tailwind tailwindcss@^3.0.24  │
 ╰─────────────────────────────────────────────────╯
Continue? » (Y/n)


Astro will create the basic ./tailwind.config.cjs file.
Continue? » (Y/n)


Astro will make the following changes to your config:
 ╭ astro.config.mjs ─────────────────────────────╮
 │ import { defineConfig } from 'astro/config';  │
 │                                               │
 │ import tailwind from "@astrojs/tailwind";     │
 │                                               │
 │ // https://astro.build/config                 │
 │ export default defineConfig({                 │
 │   integrations: [tailwind()]                  │
 │ });                                           │
 ╰───────────────────────────────────────────────╯
Continue? » (Y/n)

Adding configuration and packages

After installation you can add settings or additional packages via the automatically created tailwind.config.cjs at the project root. Below are the settings I usually change:

Change default base.css file

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

By default Tailwind will inject the CSS file containing the above into the entire project. Create your own base.css in src/style so you can add extra global CSS, use the @layer🔗 directive, or avoid importing that file by default on some pages. Specifically, set the applyBaseStyles property in astro.config.mjs to false, then include your own base.css from components.

  integrations: [
    tailwind({
      applyBaseStyles: false,
    }),
  ],

Define variables into CSS variables

A common headache is writing highly customized components with scoped CSS while needing to use variables defined in Tailwind. No problem — they can coexist nicely. Just define your site’s style variables as CSS variables on :root, so any component can access them (not limited to Tailwind). The Tailwind config can also reference CSS variables🔗.

Adding Tailwind plugins

  • @tailwindcss/typography🔗 - Static sites often contain article content and similar documents. A good set of styles makes content more readable; this plugin adds everything you need for article styling and can be extended from there. (Examples can be found in my blog post🔗)
  • tailwindcss-fluid-type🔗 - If you want font sizes to scale with the viewport, this package gives you more control over how text appears across layouts. (Examples can be found in my site title🔗)

Implementing the button

Finally, let’s refactor the button we wrote last time using Tailwind. Changing the approach can achieve the same result; here’s my method:

interface Props {
  href?: string;
  theme?: keyof typeof themeClassList;
  size?: keyof typeof sizeClassList;
}


const { href, theme, size, ...rest } = Astro.props;
const Element = href ? 'a' : 'button';


// Define theme variants
const themeClassList = {
  solid: '',
  outline: '',
  secondary: '',
  link: '',
};


// Define size variants
const sizeClassList = {
  md: '',
  lg: '',
  block: '',
};


// Determine current theme and size
const themeClass = theme ? themeClassList[theme] : themeClassList['solid'];
const sizeClass = size ? sizeClassList[size] : sizeClassList['md'];


// Default theme and size
const defaultButtonStyle = '';
---


<Element href={href} class:list={[defaultButtonStyle, themeClass, sizeClass]} {...rest}>
  <slot />
</Element>
<button>Click Me</button>
<a href="/" size="block" theme="outline">Click Me</button>

Conclusion

This chapter focuses on my experience using Tailwind with Astro. If you don’t plan to adopt Tailwind you can skip to the next chapter. After practicing buttons in two chapters, I recommend trying to build various components to become familiar with using Astro — it should be easy for you now.

Further reading