home / skills / ehtbanton / claudeskillsrepo / tailwind-config-generator

tailwind-config-generator skill

This skill generates a complete Tailwind CSS configuration tailored with content paths, theme extensions, and plugins for your project.

npx playbooks add skill ehtbanton/claudeskillsrepo --skill tailwind-config-generator

Review the files below or copy the command above to add this skill to your agents.

Files (2)

SKILL.md

1.0 KB

---
name: tailwind-config-generator
description: Generate Tailwind CSS configuration files with custom themes, plugins, and content paths. Triggers on "create tailwind config", "generate tailwind configuration", "tailwind setup", "tailwindcss config".
---

# Tailwind Config Generator

Generate Tailwind CSS configuration files with custom themes, colors, and plugins.

## Output Requirements

**File Output:** `tailwind.config.js` or `tailwind.config.ts`
**Format:** Valid Tailwind CSS configuration
**Standards:** Tailwind CSS 3.x

## When Invoked

Immediately generate a complete Tailwind configuration with content paths, theme customizations, and plugins.

## Configuration Template

```javascript
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./src/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {
      colors: {
        primary: '#3b82f6',
      },
    },
  },
  plugins: [],
};
```

## Example Invocations

**Prompt:** "Create tailwind config with custom color palette"
**Output:** Complete `tailwind.config.js` with extended theme.

Overview

This skill generates complete Tailwind CSS configuration files (tailwind.config.js or tailwind.config.ts) tailored to your project. It produces valid Tailwind 3.x configuration with content paths, theme extensions, custom color palettes, and optional plugins. Use the triggers like "create tailwind config", "tailwind setup", or "generate tailwind configuration" to run it.

How this skill works

On invocation the skill builds a ready-to-use configuration object containing content globs, theme.extend entries, color definitions, and a plugins array. You can request specific customizations—colors, fonts, breakpoints, JIT options, or plugin presets—and the skill returns a formatted config file. It ensures the output follows Tailwind 3.x standards and can be emitted as .js or .ts according to your preference.

When to use it

Starting a new project and you need a ready Tailwind config with content paths and sensible defaults.
Adding a custom color palette, font stack, or spacing scale to an existing Tailwind setup.
Preparing a config that includes community plugins like forms, typography, or custom plugin lists.
Converting a minimal config into a TypeScript-friendly tailwind.config.ts file.
Automating config generation in project scaffolding or templates.

Best practices

Always set content paths to include all source file extensions used in the project to avoid missing classes.
Place custom design tokens under theme.extend to preserve Tailwind defaults and maintain upgrade compatibility.
Prefer semantic color names (primary, secondary, neutral) in addition to raw hex keys for easier maintenance.
Validate generated config by running the Tailwind CLI or your build step to catch syntax issues early.
Use plugins array for official plugins (forms, typography) and include comments describing custom plugin roles.

Example use cases

Create a tailwind.config.js with an extended color palette and custom primary/secondary tokens.
Generate tailwind.config.ts for a TypeScript React app including content paths like ./src/**/*.{ts,tsx}.
Produce a config that adds custom spacing and font families and enables the forms and typography plugins.
Quickly scaffold a minimal config for prototypes that expands into a full theme later.

FAQ

Can the skill output TypeScript config?

Yes. Request tailwind.config.ts and the skill will produce a TypeScript-flavored export and types comment.

Which Tailwind version does it target?

The generator produces configurations compatible with Tailwind CSS 3.x by default.

Can I include plugins?

Yes. You can specify official or custom plugins and the skill will add them to the plugins array with basic setup.