DEV Community

Cover image for Adding Tailwind CSS to Nuxt 3 πŸƒ (2023)
Lewis Lloyd
Lewis Lloyd

Posted on

4

Adding Tailwind CSS to Nuxt 3 πŸƒ (2023)

Introduction

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

Tailwind is a powerful tool for rapidly styling modern web applications.

Utility-first CSS

Utility-first CSS is a design approach that uses pre-defined classes to style HTML elements. We refer to these classes as utilities.

One of the main advantages of utility-first CSS is that it allows you to style elements quickly without coupling them to custom CSS through stylesheets. This approach can be difficult to maintain when an app grows bigger.

You may argue that this will lead to code repetition, but when combined with component-based web frameworks (e.g. React, Vue), repetition is minimised while still keeping elements decoupled from stylesheets.

Tailwind

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

  • Easy configuration of built-in utilities
  • Just-in-time compiler to avoid build times entirely
  • Many great plugins available (typography, forms, etc.)

Installation

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

Install the package:

yarn add --dev @nuxtjs/tailwindcss
Enter fullscreen mode Exit fullscreen mode

Add the module to your Nuxt configuration:

// nuxt.config.ts

export default defineNuxtConfig({
  // ...
  modules: [
    // ...
    '@nuxtjs/tailwindcss',
  ],
})
Enter fullscreen mode Exit fullscreen mode

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

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>
Enter fullscreen mode Exit fullscreen mode

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')],
}
Enter fullscreen mode Exit fullscreen mode

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:

Image of Timescale

πŸš€ pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applicationsβ€”without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more

Top comments (5)

Collapse
 
arozwalak profile image
Artur Rozwalak β€’

Hi! thanks for the tutorial. Could you add more how to configure tailwindCSS with Nuxt3 for production? Everyone is explaining how to configure it for development mode, but once building Nuxt using bun run build tailwind styles are not included in the build.

Collapse
 
tao profile image
Lewis Lloyd β€’

Hey! It should be automatic, as long as you have modules: ['@nuxtjs/tailwindcss'] in your Nuxt configuration. Have you edited the default configuration anywhere? (e.g., custom cssPath)

Collapse
 
arozwalak profile image
Artur Rozwalak β€’

I've added css: ['~/assets/styles/css/tailwind.css', '~/assets/styles/scss/main.scss'], defineNuxtConfig({}) below modules, and that works fine in dev mode, but after build prod Nuxt is not adding the content of ~/assets/styles/css/tailwind.css to the build. I've got around that by importing same file in main layout.vue file, but I think it's not how it should be.

Collapse
 
alexkougianos profile image
Alex Kougianos β€’

Hello and thank you for the tutorial. Do you know about prettier-plugin-tailwindcss and how to get it to work with nuxt?

Collapse
 
tao profile image
Lewis Lloyd β€’ β€’ Edited

Yes! Run yarn add --dev prettier-plugin-tailwindcss and it should work automatically thanks to Prettier's autoloading convention.

If it doesn't, create a .prettierrc as such:

{
  "plugins": ["prettier-plugin-tailwindcss"]
}
Enter fullscreen mode Exit fullscreen mode

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up