Visit our GitHub
docs

Installation

Learn how to install Tailus Themer and all its dependancies in your project.

Prerequisites

Before you begin, ensure that you have already installed Tailwind CSS in your project. If not, please follow the Tailwind CSS installation guide.

Install Tailus Themer

1. Install the packages

Run the following command in your terminal to install the Tailus Themer and CVA packages in your project:

Terminal
npm install @tailus/themer class-variance-authority

This command will add the @tailus/themer package to your project’s dependencies.

CVA for Class Variance Authority is a library that we use to create reusable components with multiple variants in a type-safe and efficient manner.

2. Import and use the themer plugin

After installing the Themer package, import and use the themer plugin in your Tailwind CSS configuration file:

tailwind.config.js
import themer from "@tailus/themer";

export default = {
    content : [
        // ... your other paths here
        "./node_modules/@tailus/themer-**/dist/**/*.{js,ts}"
    ],
    theme: {
        extend: {
            colors: ({ colors }) => ({
                primary: colors.blue,
                secondary: colors.purple,
                accent : colors.pink,
                success: colors.green,
                danger: colors.red,
                warning: colors.yellow,
                info: colors.blue,
                gray : colors.zinc,
                white: colors.white,
                black: colors.black,
                transparent: colors.transparent,
            })
        },
    },
    plugins: [
        themer
    ],
};

In this code snippet, the themer plugin is imported at the top of the file. Then, the path to the Themer packages is added to the content array, and the themer plugin is added to the plugins array in your Tailwind CSS configuration file.

3. Configure the paths

We recommand to add all the components from our UI Kit in the /components/tailus-ui folder. Add aliases to your tsconfig.json file to make the import of the components easier.

Add the following code to your tsconfig.json file:

tsconfig.json
{
    "compilerOptions": {
        /* Paths */
        "baseUrl": "./src",
        "paths": {
            "tailus-ui/*": ["components/tailus-ui/*"],
            "lib/*": ["lib/*"]
        }
    },
}

4. Configure vitejs aliases

If you are using Vitejs, Add the following aliases to your vite.config.ts file to avoid errors.

vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import path from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      'tailus-ui': path.resolve(__dirname, './src/components/tailus-ui'),
      'lib': path.resolve(__dirname, './src/lib'),
    }
  }
})

What’s next?

Congratulations on successfully installing Tailus Themer! The next step in the process involves creating two essential Utilties : cn and cloneElement.