Tailwind CSS Setup

Tailwind CSS is a utility-first CSS framework that enables you to rapidly build custom designs without writing custom CSS. It's highly customizable and works well with Vue and Nuxt, providing you with utility classes to style your components directly in the HTML. To install Tailwind CSS, follow these steps:

1. Install Tailwind CSS via npm:

npm install -D tailwindcss@3.4.17 postcss autoprefixer

2. Create a Tailwind configuration file:

 # This will generate a `tailwind.config.js` file in your project root.
npx tailwindcss init

This will generate a tailwind.config.js file in your project

3. Update Tailwind configuration file:

Tailwind CSS configuration allows developers to customize and extend the default design system for their Nuxt 3 project. The configuration file provides comprehensive control over colors, spacing, breakpoints, and other design tokens.

// tailwind.config.js
// Configure the paths to all of your template files.

/** @type {import('tailwindcss').Config} */
export default {
  darkMode: 'class',
  content: [
    "./components/**/*.{js,vue,ts}",
    "./layouts/**/*.vue",
    "./pages/**/*.vue",
    "./plugins/**/*.{js,ts}",
    "./app.vue",
    "./error.vue",
  ],
  theme: {
    extend: {
      fontFamily: {},
      colors:{},
      spacing: {},
},
  },
  plugins: []
}

4. Import the Postcss and CSS file in your nuxt.config.ts:

// nuxt.config.ts
export default defineNuxtConfig({
  postcss: {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    },
  },
  css: ["~/assets/css/global.css"],
});

5. Create a CSS file (e.g., ./assets/css/global.css) and add the following lines:

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

Usage Example

<template>
  <div>
    <h1 class="text-3xl font-bold underline text-red-500">
      Hello world!
    </h1>
  </div>
</template>

Conclusion

You have successfully set up Tailwind CSS in your project. You can now use Tailwind's utility classes to style your application.

For more information, refer to the Tailwind CSS documentation.