How to use PHP variables in TailwindCSS

In this post I will show you how to pass the values of PHP variables to TailwindCSS variables.

In the following example, I will use some colours defined in a PHP array, to define them in the ‘theme.colors’ and use them in the different TailwindCSS classes, such as Background Color or Text Color.

In the first step I will open the tailwind.config.js file, and in the ‘theme > extend > colours’ section I will define the different custom colours I will use. The value I will give to each colour will be the value of a CSS variable.

module.exports = {
    content: [
        "./resources/**/*.{php,js}",
        "./Functionality/**/*.php",
        "./Components/**/*.php",
    ],
    theme: {
        extend: {
            colors: {
                primary: "var(--primary-color)",
                background: "var(--background-color)",
                buy: "var(--buy-color)",
                discount: "var(--discount-color)",
            },
        },
    },
    plugins: [],
    important: true,
    corePlugins: {
        preflight: false,
    }
}

The next step, will be to go to the style tag and inside the ‘:root’ block I will define the variables that I have added in the tailwind.config.js file and with ”, I will assign a value.

That’s it! You can now use the different colours in the TailwindCSS classes.