Tailwindcss Theming Versions Save

• Fixed an issue where color variants' opacity was duplicated (output as 0,0,0,.5,.5 instead of 0,0,0,.5).

• Added the possibility to extend Tailwind configuration with custom CSS properties
  • Syntax is .variable('name', 'value', 'tailwindConfigurationItem')
• New documentation

• Now supports adding personal custom properties
  • Call .variable(name, value) to add a custom property to a theme
  • See the readme for more information

Example

The following theme configuration:

new Theme()
  .color('primary', 'white')
  .variable('theme-scheme', 'light')
  .variable('font-title', ['Roboto', '"Segoe UI"', 'Arial']);

Will generate:

:root {
  --color-primary: #ffffff;
  --theme-scheme: light;
  --font-title: Roboto,"Segoe UI",Arial;
}

• Fixed an issue with color variants.
  • Can be a breaking change: before, opacity was not taking into account (eg. #ffffff00 would be white)
  • Now, opacity is taking into account (eg. #ffffff00 will be transparent)

Note: v2.0.1 actually contains these changes, but v2.0.2 fixes a typo in them.

• Configuration changes
  • A theme is no longer default by default, you have to call .default()
  • ThemeBuilder is now more fluent
• Added .dark() and .light() helpers in ThemeBuilder
• Removed .schemeDefault(), replaced by existing .default()
• Removed .keep(), replaced by .assignable()

• Fixed an issue with opacity variants being parsed as pixel values by Tailwind.

• Fixed an issue where default colors which had variants were not generated.

• Update for tailwindcss@canary.
• Contains breaking API changes, check the readme for the new configuration instructions.