Tailwind CSS Setup

Why Configuration is Needed

UI States uses Tailwind CSS classes for skeleton animations (animate-pulse) and backgrounds (bg-neutral-200/300). By default, Tailwind only scans your project files for classes. Since UI States classes are in node_modules, you need to tell Tailwind to include them.

Add Content Path

Update your tailwind.config.js to include UI States in the content array:

// tailwind.config.js
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
    "./node_modules/@promise-inc/ui-states/dist/**/*.{js,cjs}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

TypeScript Config

If using tailwind.config.ts:

// tailwind.config.ts
import type { Config } from "tailwindcss";

const config: Config = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
    "./node_modules/@promise-inc/ui-states/dist/**/*.{js,cjs}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

export default config;

Verify Setup

After updating your config, rebuild your CSS:

# Rebuild Tailwind CSS
npm run build:css

# Or restart your dev server
npm run dev

You should now see animated skeleton loaders with proper styling.

Classes Used

UI States uses the following Tailwind classes internally:

• animate-pulse - Skeleton pulse animation
• bg-neutral-200 - Light mode skeleton background
• bg-neutral-300 - Light mode skeleton background (variant)
• dark:bg-neutral-700 - Dark mode skeleton background
• dark:bg-neutral-800 - Dark mode skeleton background (variant)
• rounded - Border radius for skeleton elements

Dark Mode Support

UI States skeletons automatically support Tailwind dark mode. No additional configuration needed:

// tailwind.config.js
module.exports = {
  darkMode: "class", // or 'media'
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
    "./node_modules/@promise-inc/ui-states/dist/**/*.{js,cjs}",
  ],
};