Skip to content

v1.1.1

Compare
Choose a tag to compare
@mertasan mertasan released this 29 Apr 11:47
· 206 commits to master since this release

fixes for colorVariable() helper. ref: #2

New option:

plugins: [
  require('@mertasan/tailwindcss-variables'){
    colorVariables: true
  }
]

Usage:

module.exports = {
  theme: {
    colors: {
      primary: colorVariable('--colors-primary'),
      secondary: colorVariable('var(--colors-secondary)'), // or
      gray: 'var(--colors-gray)', // or default usage
    },
  }
}

Output:

:root {
  --colors-primary: #ff0;
  --colors-secondary: #000000;
  --colors-gray: #6B7280;
  --colors-primary-rgb: 255,255,0;
  --colors-secondary-rgb: 0,0,0;
  --colors-gray-rgb: 107,114,128
}

.text-primary {
  --tw-text-opacity: 1;
  color: rgba(var(--colors-primary-rgb), var(--tw-text-opacity))
}

.bg-secondary {
  --tw-bg-opacity: 1;
  background-color: rgba(var(--colors-secondary-rgb), var(--tw-bg-opacity))
}

.bg-gray {
  background-color: var(--colors-gray)
}