Using Custom Properties

Setting custom properties

Default configuration

Define tailwind configuration through css custom properties if needed:
Customizing colors with custom properties documentation

Example of configuration can be found in
assets/css/custom-properties-example.css

Css configurations must be added to
assets/css/custom-properties.css

Example of tailwind configuration can be found in
tailwind.config.custom-properties.example.js

Configurations must be added to taiwind.config.js file

Using Tailwind opacity modifier eg: bg-primary-500/25

In order to use opacity, color should be indicated in rgb or hsl (as shown in Tailwind documentation).

Example of css configurations with rgb values can be found in
assets/css/custom-properties-example.css

Example of tailwind configuration with rgb can be found in
tailwind.config.custom-properties.rgb-example.js

Eventually, with this approach, this value can’t be use as is, for istance for changing theme colors only with custom properties (without tailwind css build). Which approach to use in a project, will depend on project requirements and build/use environment.