Tailwindcss-pluins

• Provite useful plugins for tailwind-css

//tailwind.config.js
const {selectorWeight} = require('tailwindcss-pluins');
module.exports = {
  // ...
   plugins: [selectorWeight],
}

plugins list

• selectorWeight
  • p&: weight add 0001
  • &: weight add 0010

use:

   <p className="&:p&:&:text-red ">test</p>

compiler

/* &:p&:&:text-red */
.\&\:p\&\:\&\:text-red[class*=\&\:text-red]:not(script)[class*=\&\:text-red] {
    color: var(--red);
}

• dynamicThemes
  • dynamicThemes({colors,callbackFX})
    • colors: colors config object
    • callbackFX: hanlder done callback,pramters is cssMap、cssRaw、colorsConfig

use:

const designColors = {
  //base colors
  red: '#FF4646',
  orange: '#FF5800',
  green: '#14A22F',
  blue: '#2239BC',
  brown: {
    default: '#FFDDCB',
    100: '#FFC2A2',
    200: '#FFA474',
  },
  cyan: '#B7F2C2',
  skyBlue: '#00A7FF',
  lightBlue: '#0076FF',
  white: '#ffffff',
  //
  warning: '$red',
  highlight: '$orange',
  good: '$green',
  disable: '#cccccc',
  'border-color': '#EEEEEE',
  'bg-primary': '#F7F7F7',
  'bg-primary-btn': '$brown',
  light: '$white',
  dark: '$black',
  content: '#999999',
  'title-primary': '#333333',
  'title-sub': '#666666',

  black: {
    default: '#000000',
    '300': '#333',
    '400': '#3D3D3D',
  },
  yellow: {
    '300': '$orange',
  },
}
const dynamicThemes = require('tailwindcss-pluins/dynamicThemes')({
  colors: designColors,
  callbackFX: (args) => console.log(args),
});
 module.export = {
  // ...
  plugins: [dynamicThemes],
 }

compiler

:root, body {
    --red: #FF4646;
    --orange: #FF5800;
    --green: #14A22F;
    --blue: #2239BC;
    --brown-100: #FFC2A2;
    --brown-200: #FFA474;
    --brown: #FFDDCB;
    --cyan: #B7F2C2;
    --sky-blue: #00A7FF;
    --light-blue: #0076FF;
    --white: #ffffff;
    --warning: var(--red);
    --highlight: var(--orange);
    --good: var(--green);
    --disable: #cccccc;
    --border-color: #EEEEEE;
    --bg-primary: #F7F7F7;
    --bg-primary-btn: var(--brown);
    --light: var(--white);
    --dark: var(--black);
    --content: #999999;
    --title-primary: #333333;
    --title-sub: #666666;
    --black-300: #333;
    --black-400: #3D3D3D;
    --black: #000000;
    --yellow-300: var(--orange);
}