daisyUI Theme Generator

You can add your custom themes to tailwind.config.js file in daisyui > themes array. On this page, you can pick required color values and see how the components will look like with them.

You can also define optional colors to have more control on the color values (for example: the color of a button when it's focused on the color of the text on a button)

Check out colors page to see all the color names you can use.

Check out themes page to see all the CSS variables you can use to customize the design decision (example: border-radius, animations, etc.)

tailwind.config.js

Preview

Default Primary Secondary Accent Info Success Warning Error
I'm a simple link I'm a simple link I'm a simple link I'm a simple link
Default Primary Secondary Accent Info Success Warning Error
Total Page Views
89,400
21% more than last month
60%
75%
90%
Text Size 1
Text Size 2
Text Size 3
Text Size 4
Text Size 5
Text Size 6
Text Size 7
  • Step 1
  • Step 2
  • Step 3
  • Step 4
12 unread messages. Tap to see.
New software update available.
Your purchase has been confirmed!
Warning: Invalid email address!
Error! Task failed successfully.