Cómo utilizar variables de PHP con TailwindCSS

En este post te enseñaré como pasar los valores de las variables de PHP a variables de TailwindCSS.

En el siguiente ejemplo, utilizaré unos colores definidos en un array de PHP, para definirlos en el ‘theme.colors’ y poderlos utilizar en las diferentes clases de TailwindCSS, como podría ser el Background Color o el Text Color.

Pasar los valores de las variables de PHP a variables de TailwindCSS

En el primer paso abriré el fichero de tailwind.config.js, y en el apartado de ‘theme > extend > colors’ definiré los diferentes colores personalizados que utilizaré. El valor que le daré a cada color, será el de una variable CSS.

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,
    }
}

El siguiente paso, será ir a la etiqueta style y dentro del bloque ‘:root’ definiré las variables que he añadido en el fichero de tailwind.config.js y con ”, le asignaré un valor.

¡Listo! Ya se podrá utilizar los diferentes colores en las clases de TailwindCSS.