cutom tailwind css backgrounds

[Jean-Baptiste-Lasselle]

oh oui c'est ce qu'il me faut : des background custom en tailwind config :

• pour les messages de chat
• pour le background du conteneur global

exmple de comment faire un plugin pour tailwind css, écrit là en CommonJS, mais à faire en typescript ?

ici le plugin joue avec l'opacité pour créer les "stripes" (excellent)

https://play.tailwindcss.com/QNkCU1z1UX?file=config

const colors = require('tailwindcss/colors')

const toRgba = (hexCode, opacity = 50) => {
    let hex = hexCode.replace('#', '');

    if (hex.length === 3) {
        hex = `${hex[0]}${hex[0]}${hex[1]}${hex[1]}${hex[2]}${hex[2]}`;
    }    

    const r = parseInt(hex.substring(0, 2), 16);
    const g = parseInt(hex.substring(2, 4), 16);
    const b = parseInt(hex.substring(4, 6), 16);

    return `rgba(${r},${g},${b},${opacity / 100})`;
};

const flattenColorPalette = (obj, sep='-') => Object.assign(
  {}, 
  ...function _flatten(o, p='') { 
    return [].concat(...Object.keys(o)
      .map(k => 
        typeof o[k] === 'object' ?
          _flatten(o[k],k+sep) : 
          ({[p+k]: o[k]})
      )
    );
  }(obj)
);

module.exports = {
  theme: {
    extend: {
      colors: {
        'light-blue': colors.lightBlue,
        cyan: colors.cyan,
      },
    },
  },
  variants: {},
  plugins: [
    function ({ addUtilities, theme }) {
      const utilities = {
        '.bg-stripes': {
          backgroundImage:
            'linear-gradient(45deg, var(--stripes-color) 12.50%, transparent 12.50%, transparent 50%, var(--stripes-color) 50%, var(--stripes-color) 62.50%, transparent 62.50%, transparent 100%)',
          backgroundSize: '5.66px 5.66px',
        },
      }

      const addColor = (name, color) =>
        (utilities[`.bg-stripes-${name}`] = { '--stripes-color': color })

      const colors = flattenColorPalette(theme('backgroundColor'))
      for (let name in colors) {
        try {
          const [r, g, b, a] = toRgba(colors[name])
          if (a !== undefined) {
            addColor(name, colors[name])
          } else {
            addColor(name, `rgba(${r}, ${g}, ${b}, 0.4)`)
          }
        } catch (_) {
          addColor(name, colors[name])
        }
      }

      addUtilities(utilities)
    },
  ],
}

Et ça s'utilise comme cela :

<div class="h-full w-full bg-light-blue-400 bg-stripes bg-stripes-white"></div>

exemple:

<div class="min-h-screen bg-gray-100 py-6 flex flex-col justify-center sm:py-12">
  <div class="rounded-t-xl overflow-hidden bg-gradient-to-r from-light-blue-50 to-light-blue-100 p-10">
    <div class="flex items-center justify-around">
      <div class="box-border h-32 w-32 p-4 border-4 border-light-blue-400 bg-light-blue-200 rounded-md">
        <div class="h-full w-full bg-light-blue-400 bg-stripes bg-stripes-white"></div>
      </div>
    </div>
  </div>
</div>

sachant que l'on a un index.css :

@tailwind base;
@tailwind components;
@tailwind utilities;

rendu: