Nuxt Tailwind Setup

This script automates the process of setting up Tailwind CSS in a Nuxt 3 project. It simplifies the integration of Tailwind CSS by installing the required packages and updating your project configuration files.

Features

• Easy Setup: Quickly adds Tailwind CSS and PostCSS to your Nuxt 3 project.
• Configuration Management: Creates or updates necessary configuration files without overwriting existing unrelated content.

Installation

First, install the package globally:

npm install -g nuxt-tailwind-setup

Usage

In your Nuxt 3 project directory, run the following command:

nuxt-tailwind-setup

This command will:

• Install tailwindcss, postcss, and autoprefixer
• Create or update the following files:
• • nuxt.config.ts
• • tailwind.config.js
• • assets/css/main.css

Example Configuration

After running the setup, your nuxt.config.ts should include the following configuration:

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  devtools: { enabled: true },
  css: ['~/assets/css/main.css'],
  postcss: {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    },
  },
})

Example tailwind.config.js

This file will be created or updated to look like this:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./components/**/*.{js,vue,ts}",
    "./layouts/**/*.vue",
    "./pages/**/*.vue",
    "./plugins/**/*.{js,ts}",
    "./app.vue",
    "./error.vue",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

Example CSS File

The script will create or update assets/css/main.css with the following content:

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