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"
},

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 Tailwind CSS configuration​

Tailwind-Joy does not export CSS; instead, the class name of the Tailwind CSS syntax is embedded in the component's 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.

Import module​

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

Extend content​

{
  content: [
    // Add this to your `content`
    { raw: tjClassNames },
  ],
}

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,
  ],
}