使用 PHP 从服务器数据库加载 tailwind.config.js 的颜色

Question

我们正在使用使用 tailwind 的扩展程序。

我们有多家商店需要此扩展。每间店都有不同的颜色。

我们想将商店数据库中的颜色加载到 tailwind 中，因为我们的首席开发人员不希望我们为每个项目使用多个 git 分支。

这是我的tailwind.config.js:

const colors = require('tailwindcss/colors')

module.exports = {
  prefix: 'hfc-',
  important: true,
  purge: ['./view/frontend/**/*.ts', './view/frontend/**/*.vue'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    colors: {
      transparent: 'transparent',
      white: colors.white,
      gray: colors.gray,
      red: colors.red,
      primary: {
        DEFAULT: '#EB7B2D',
        50: '#FFFFFF',
        100: '#FDF0E7',
        200: '#F8D3B9',
        300: '#F4B68A',
        400: '#EF985C',
        500: '#EB7B2D',
        600: '#D16214',
        700: '#A34C0F',
        800: '#74360B',
        900: '#452007',
      },
      green: {
        DEFAULT: '#52AE32',
        50: '#DBF2D3',
        100: '#CBEDBF',
        200: '#ABE198',
        300: '#8AD670',
        400: '#6ACB48',
        500: '#52AE32',
        600: '#3F8627',
        700: '#2D5F1B',
        800: '#1A3710',
        900: '#071004',
      },
    },
    fontSize: {
      sm: ['12px', '16px'],
      base: ['14px', '20px'],
      lg: ['16px', '24px'],
      xl: ['20px', '28px'],
      '2xl': ['28px', '36px'],
      '3xl': ['36px', '44px'],
      '4xl': ['44px', '52px'],
      '5xl': ['52px', '60px'],
    },
    fontFamily: {
      sans: 'Open Sans',
      serif: 'Montserrat',
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

如何使用 PHP 从服务器加载颜色？

Answer 1

如果你的数据库 returns 每个颜色位置都有一个字符串，你可以设置 CSS variable

:root {
  --hfc-green-100: <?php echo $color; ?>;
}

其中 $color - 来自数据库的净化颜色（如果不存在则使用默认值）

现在您可以更改 tailwind.config.js - 使用此变量代替硬编码颜色

// Showing only related part
module.exports = {
  theme: {
    colors: {
      green: {,
        100: 'var(--hfc-green-100)',
      },
    },
  },
}

使用 PHP 从服务器数据库加载 tailwind.config.js 的颜色

Load colors for tailwind.config.js from server database by using PHP

php

tailwind-css