@redrobui/tailwind-config

Shared Tailwind CSS v4 configuration for the Redrob AI Design System.

🎨 Live Demo

View Design System in Storybook →

See the Tailwind configuration in action with live component examples and design tokens.

Installation

npm install @redrobui/tailwind-config tailwindcss@^4.0.0 @tailwindcss/postcss

Usage

1. Tailwind Config

// tailwind.config.js
const redrobConfig = require('@redrobui/tailwind-config');

module.exports = {
  presets: [redrobConfig],
  content: [
    './src/**/*.{js,ts,jsx,tsx}',
    './node_modules/@redrobui/react/**/*.{js,ts,jsx,tsx,mjs}',
    // Or for Vue:
    // './node_modules/@redrobui/vue/**/*.{vue,js,ts,jsx,tsx,mjs}',
  ],
};

2. PostCSS Config

// postcss.config.js
module.exports = {
  plugins: {
    '@tailwindcss/postcss': {},
    autoprefixer: {},
  },
};

3. CSS Import

/* src/index.css */
@import 'tailwindcss';

What's Included

• Custom color palette from @redrobui/tokens
• Spacing scale
• Typography settings
• Border radius values
• Box shadows

License

MIT