@gluhar/theme

Gluhar Theme package.
Configures tailwind setup. Provides composables (useTheme) and utils for working with the theme and colors.

✨  Release Notes

INFO

I have set a specific version for @nuxtjs/tailwindcss of 6.12.2, because 6.13 messes up with Tailwind Intellisense and does not load the config file correctly. It produces a .nuxt/tailwind.config.d.ts file that overrides the actual config and the defined custom classes. (23 Jan 2025)

Installation

Install the module to your Nuxt application with one command:

npx nuxi module add @gluhar/theme

Tailwind Config

In your /config folder, create a tailwind.config.ts file that is a standard tw config. For theme use gluharTheme from the package and merge with defu.

Importing the predefined theme like such is meant for vs code tw intellisense to work properly.

import gluharTheme from "@gluhar/theme/gluharTheme";
import { defu } from "defu";

export default {
  // Theme
  theme: defu(
    {
      // Extends
      extend: {
        // Colors
        colors: {
          primary: {
            base: "#3A3A3A",
          },
        },
      },
    },
    gluharTheme,
  ),
};

Create a base.css file to import tailwind's classes and provide initial variables.

In ~/assets/styles/base.css

@tailwind base
@tailwind components
@tailwind utilities;

If you want your main stylesheet to be named differently, not be sass or be elsewhere, you can config the cssPath in nuxt.config.ts:

{
  modules: [
    ...,
    "@gluhar/theme"
  ],

  gluharTheme: {
    tailwind: {
      cssPath: '~/assets/main.css'
    }
  }
}

Contribution

# Install dependencies
npm install

# Generate type stubs
npm run dev:prepare

# Develop with the playground
npm run dev

# Build the playground
npm run dev:build

# Run ESLint
npm run lint

# Run Vitest
npm run test
npm run test:watch

# Release new version
npm run release