Name: Tailwind Config Extend
Author: knofler

Tailwind Config Extension Playbook

1. Identify Customization Needs

Clarify what needs to be added or changed (colors, fonts, spacing, etc.).
Read existing tailwind.config.js or tailwind.config.ts.
Check documentation/AI_RULES.md for any styling mandates.

2. Update Tailwind Config

Open tailwind.config.js (or .ts).
Use theme.extend to add without overriding defaults:

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: { 50: '#f0f9ff', 500: '#3b82f6', 900: '#1e3a5f' },
      },
      fontFamily: {
        display: ['Inter', 'sans-serif'],
      },
    },
  },
};

Tailwind Config Extend

Tailwind Config Extension Playbook

1. Identify Customization Needs

2. Update Tailwind Config

3. Add Custom Colors

Tailwind Config Extend

Tailwind Config Extension Playbook

1. Identify Customization Needs

2. Update Tailwind Config

3. Add Custom Colors

4. Add Custom Fonts

5. Add Custom Spacing/Breakpoints

6. Configure Plugins

7. Update PostCSS Config (if needed)

8. Verify Changes

9. Update State

10. Review Checklist

Notion

Prose

Coding Agent (bash-first)

Continuous Learning

Security Review

Widget Generator