Tailus-UI / ui.tailus.io

Build Custom Web UIs Highly customizable React components for crafting modern, personalized websites and applications.
https://ui.tailus.io/
MIT License
392 stars 18 forks source link

Error: 'colors.danger.400' does not exist in theme config when configuring Tailus UI with Vite #61

Open eMUQI opened 2 months ago

eMUQI commented 2 months ago

Describe the bug

Hello, I'm a front-end beginner. I followed this tutorial to configure Tailus UI: https://ui.tailus.io/react/guides/vite/

However, I encountered the following error. Did I miss something?

Thank you for your assistance!

[plugin:vite:css] [postcss] D:/DEV/podcast/my-project/src/index.css:1:1: 'colors.danger.400' does not exist in your theme config. 'colors' has the following keys: 'inherit', 'current', 'transparent', 'black', 'white', 'slate', 'gray', 'zinc', 'neutral', 'stone', 'red', 'orange', 'amber', 'yellow', 'lime', 'green', 'emerald', 'teal', 'cyan', 'sky', 'blue', 'indigo', 'violet', 'purple', 'fuchsia', 'pink', 'rose'
D:/DEV/podcast/my-project/src/index.css:1:0
1  |  @tailwind base;
   |  ^
2  |  @tailwind components;
3  |  @tailwind utilities;

To Reproduce Steps to reproduce the behavior:

  1. Create a new Vite project
    npm create vite@latest my-project -- --template react
    cd my-project
  2. Install Tailwind CSS
    npm install -D tailwindcss postcss autoprefixer
    npx tailwindcss init -p
  3. Install Tailus UI Themer
    npm install @tailus/themer tailwind-merge lucide-react
  4. Update Tailwind CSS configuration
    /** @type {import('tailwindcss').Config} */
    module.exports = {
    content: [
    './index.html',
    './src/**/*.{js,ts,jsx,tsx}',
    './node_modules/@tailus/themer/dist/components/**/*.{js,ts}',
    ],
    theme: {
    extend: {},
    },
    plugins: [],
    }
  5. Add css directives
    
    // index.css

@tailwind base; @tailwind components; @tailwind utilities;


6. Add cloneElement utility
7. `npm run dev`

**Expected behavior**
Without any error

**Screenshots**
If applicable, add screenshots to help explain your problem.

**Desktop (please complete the following information):**
 - OS: Windows
 - Browser chrome
 - Version [e.g. 22]

**Additional context**
Add any other context about the problem here.
bernard-ng commented 1 day ago

Hello @eMUQI sorry for the late response, did you manage to solve your error ?