Tailwind CSS

Add Tailwind CSS to your Nuxt application in seconds with PurgeCSS included for minimal CSS

Installation

npm i @nuxtjs/tailwindcss

Setup

Add the following lines to the modules section of nuxt.config.{ts,js}

modules: ['@nuxtjs/tailwindcss']

Demo

tailwind.config.ts

import type { Config } from 'tailwindcss'

export default <Partial<Config>>{
  theme: {
    extend: {
      colors: {
        tailwind: {
          primary: '#38bdf9',
          dark: '#0f172a',
        },
      },
    },
  },
}

Tailwind.vue

<template>
  <h1 class="p-4 bg-tailwind-dark text-tailwind-primary border border-tailwind-primary rounded">
    A utility-first CSS framework packed with classes.
  </h1>
</template>

A utility-first CSS framework packed with classes.