Blue and purple background graphics
Pink boxes logolloyd.cx

Adding Tailwind CSS to Nuxt 3 🍃 (2024)

April 22, 2024 · Nuxt 3

Getting started with Tailwind CSS for utility-first styling.

Introduction

In this post, we'll introduce Nuxt Tailwind, a package for the Tailwind CSS library.

Tailwind

Tailwind is a powerful tool for rapidly styling modern web applications using utility-first CSS. This is an approach to styling that uses pre-defined classes to style HTML elements.

When combined with component-based web frameworks (e.g. React, Vue), this issue is minimised.

Tailwind isn't just a quick and effective way of writing CSS; it's also great to build with, due to a variety of development features:

  • Easy configuration of the built-in utilities
  • Just-in-Time compiler to avoid build times entirely
  • Plugins ecosystem (Typography, Forms, etc.)

Official documentation for using Tailwind with Nuxt can be found here.

Installation

Install the package:

yarn add --dev @nuxtjs/tailwindcss

Add the module to your Nuxt configuration:

// nuxt.config.ts

export default defineNuxtConfig({
  devtools: { enabled: true },
  modules: [
    // ...
    "@nuxtjs/tailwindcss",
    // ...
  ],
});

You may optionally create a configuration file:

npx tailwindcss init

And just like that, you can now start adding Tailwind classes to your Nuxt components!

Prettier integration

If you're using Prettier from earlier in the series, you should also add its Tailwind plugin:

yarn add --dev prettier-plugin-tailwindcss

This will give you automatic class sorting which is incredibly useful for organisation, especially when using lots of classes in one element (e.g. hover:, dark:). It should work automatically thanks to Prettier’s autoloading convention.

Classes

To get started, add some of Tailwind's in-built utilities to an element's class attribute.

<template>
  <NuxtLink
    to="/"
    class="font-semibold text-gray-50 hover:text-gray-400 duration-100"
  >
    Home
  </NuxtLink>
</template>

New to Tailwind? Your best bet is to check out the Tailwind docs.

Configuration

Create a tailwind.config.js file at the root of your project to configure the default theme.

module.exports = {
  theme: {
    screens: {
      sm: "640px",
      md: "768px",
      lg: "1024px",
      xl: "1280px",
    },
    extend: {
      colors: {
        linkedin: {
          primary: "#0A66C2",
          lighter: "#378fe9",
          darker: "#004182",
        },
      },
    },
  },
  plugins: [require("@tailwindcss/typography")],
};

Viewer

Nuxt Tailwind exposes a /_tailwind/ route in development where your Tailwind configuration is rendered as a library.

May your web apps become colourful and flashy 😉

Hey, guys! Thank you for reading. I hope that you enjoyed this.

Keep up to date with me:

Lewis Lloyd © 2024