Skip to main content

Installation

Default installation​

Run one of the following commands to add Tailwind-Joy to your project:

npm install tailwind-joy

Peer dependencies​

Please note that react, react-dom and tailwindcss are peer dependencies, meaning you should ensure they are installed.

"peerDependencies": {
  "react": "^18",
  "react-dom": "^18",
  "tailwindcss": "^3.4 || >=4.0.4"
},

TypeScript support​

If your project uses TypeScript, you should set the moduleResolution property in tsconfig.json to one of node16, nodenext, or bundler to correctly detect type information.

"compilerOptions": {
  "moduleResolution": "node16"
},

Extend configuration​

Tailwind-Joy's components have the utility class name embedded in their className property.

Therefore, you need to extend the Tailwind CSS configuration to make the components of Tailwind-Joy as if they were part of your project.

Tailwind CSS v3​

Import module​

const { tjTheme, tjPlugin } = require('tailwind-joy/tw-extension');

Extend content​

{
  content: [
    // Add this to your `content`
    './node_modules/tailwind-joy/dist/safelist.js',
  ],
}

Extend theme​

{
  theme: {
    extend: {
      // Add these to your `theme.extend`
      colors: tjTheme.colors,
      keyframes: tjTheme.keyframes,
      animation: tjTheme.animation,

      // Or, if you already have an extended property, use the spread syntax.
      colors: {
        ...tjTheme.colors,
      },
      keyframes: {
        ...tjTheme.keyframes,
      },
      animation: {
        ...tjTheme.animation,
      },
    },
  },
}

Extend plugins​

{
  plugins: [
    // Add this to your `plugins`
    tjPlugin,
  ],
}

Tailwind CSS v4​

Extend index.css​

@import "tailwind-joy/theme-extension.css";

@source "../node_modules/tailwind-joy/dist/safelist.js";