search

emortlock / tailwind-react-ui

React utility component primitives & UI framework for use with Tailwind CSS
https://emortlock.github.io/tailwind-react-ui/
274 stars 36 forks source link

No colors in default tailwind configuration #98

Open Kukunin opened 4 years ago

Kukunin commented 4 years ago

I tried your package and it seems great. However, It seems like colors are broken, at least with the latest tailwind and default configuration.

If you take a look in the default tailwind configuration it uses: , you'll notice there are colors are defined with degrees:

      blue: {
        100: '#ebf8ff',
        200: '#bee3f8',
        300: '#90cdf4',
        400: '#63b3ed',
        500: '#4299e1',
        600: '#3182ce',
        700: '#2b6cb0',
        800: '#2c5282',
        900: '#2a4365',
      },

but your components use bg-blue hover:bg-blue-dark, so there are no those colors.

Is it a known issue? What is the best solution for that? Thanks

Kukunin commented 4 years ago

it seems the format of the default config was changed. Solved by using this config:

const plugins = require('tailwind-react-ui/plugins');

const colors = {
  transparent: 'transparent',

  black: '#22292f',
  'grey-darkest': '#3d4852',
  'grey-darker': '#606f7b',
  'grey-dark': '#8795a1',
  grey: '#b8c2cc',
  'grey-light': '#dae1e7',
  'grey-lighter': '#f1f5f8',
  'grey-lightest': '#f8fafc',
  white: '#ffffff',

  'red-darkest': '#3b0d0c',
  'red-darker': '#621b18',
  'red-dark': '#cc1f1a',
  red: '#e3342f',
  'red-light': '#ef5753',
  'red-lighter': '#f9acaa',
  'red-lightest': '#fcebea',

  'orange-darkest': '#462a16',
  'orange-darker': '#613b1f',
  'orange-dark': '#de751f',
  orange: '#f6993f',
  'orange-light': '#faad63',
  'orange-lighter': '#fcd9b6',
  'orange-lightest': '#fff5eb',

  'yellow-darkest': '#453411',
  'yellow-darker': '#684f1d',
  'yellow-dark': '#f2d024',
  yellow: '#ffed4a',
  'yellow-light': '#fff382',
  'yellow-lighter': '#fff9c2',
  'yellow-lightest': '#fcfbeb',

  'green-darkest': '#0f2f21',
  'green-darker': '#1a4731',
  'green-dark': '#1f9d55',
  green: '#38c172',
  'green-light': '#51d88a',
  'green-lighter': '#a2f5bf',
  'green-lightest': '#e3fcec',

  'teal-darkest': '#0d3331',
  'teal-darker': '#20504f',
  'teal-dark': '#38a89d',
  teal: '#4dc0b5',
  'teal-light': '#64d5ca',
  'teal-lighter': '#a0f0ed',
  'teal-lightest': '#e8fffe',

  'blue-darkest': '#12283a',
  'blue-darker': '#1c3d5a',
  'blue-dark': '#2779bd',
  blue: '#3490dc',
  'blue-light': '#6cb2eb',
  'blue-lighter': '#bcdefa',
  'blue-lightest': '#eff8ff',

  'indigo-darkest': '#191e38',
  'indigo-darker': '#2f365f',
  'indigo-dark': '#5661b3',
  indigo: '#6574cd',
  'indigo-light': '#7886d7',
  'indigo-lighter': '#b2b7ff',
  'indigo-lightest': '#e6e8ff',

  'purple-darkest': '#21183c',
  'purple-darker': '#382b5f',
  'purple-dark': '#794acf',
  purple: '#9561e2',
  'purple-light': '#a779e9',
  'purple-lighter': '#d6bbfc',
  'purple-lightest': '#f3ebff',

  'pink-darkest': '#451225',
  'pink-darker': '#6f213f',
  'pink-dark': '#eb5286',
  pink: '#f66d9b',
  'pink-light': '#fa7ea8',
  'pink-lighter': '#ffbbca',
  'pink-lightest': '#ffebef',
};

module.exports = {
  theme: {
    colors,

    screens: {
      sm: '576px',
      md: '768px',
      lg: '992px',
      xl: '1200px',
    },
  },
  plugins: [
    ...Object.keys(plugins).map(name => plugins[name]()),
  ],
};
MatteoPieroni commented 4 years ago

Thanks for this @Kukunin!

i8ramin commented 3 years ago

I made a small udpate to what @Kukunin did (thanks!) to also include the default colors:

const plugins = require('tailwind-react-ui/plugins')

const colors = {
  transparent: 'transparent',
  current: 'currentColor',

  black: '#000',
  white: '#fff',

  'grey-darkest': '#3d4852',
  'grey-darker': '#606f7b',
  'grey-dark': '#8795a1',
  grey: '#b8c2cc',
  'grey-light': '#dae1e7',
  'grey-lighter': '#f1f5f8',
  'grey-lightest': '#f8fafc',

  'gray-100': '#f7fafc',
  'gray-200': '#edf2f7',
  'gray-300': '#e2e8f0',
  'gray-400': '#cbd5e0',
  'gray-500': '#a0aec0',
  'gray-600': '#718096',
  'gray-700': '#4a5568',
  'gray-800': '#2d3748',
  'gray-900': '#1a202c',

  'red-darkest': '#3b0d0c',
  'red-darker': '#621b18',
  'red-dark': '#cc1f1a',
  red: '#e3342f',
  'red-light': '#ef5753',
  'red-lighter': '#f9acaa',
  'red-lightest': '#fcebea',

  'red-100': '#fff5f5',
  'red-200': '#fed7d7',
  'red-300': '#feb2b2',
  'red-400': '#fc8181',
  'red-500': '#f56565',
  'red-600': '#e53e3e',
  'red-700': '#c53030',
  'red-800': '#9b2c2c',
  'red-900': '#742a2a',

  'orange-darkest': '#462a16',
  'orange-darker': '#613b1f',
  'orange-dark': '#de751f',
  orange: '#f6993f',
  'orange-light': '#faad63',
  'orange-lighter': '#fcd9b6',
  'orange-lightest': '#fff5eb',

  'orange-100': '#fffaf0',
  'orange-200': '#feebc8',
  'orange-300': '#fbd38d',
  'orange-400': '#f6ad55',
  'orange-500': '#ed8936',
  'orange-600': '#dd6b20',
  'orange-700': '#c05621',
  'orange-800': '#9c4221',
  'orange-900': '#7b341e',

  'yellow-darkest': '#453411',
  'yellow-darker': '#684f1d',
  'yellow-dark': '#f2d024',
  yellow: '#ffed4a',
  'yellow-light': '#fff382',
  'yellow-lighter': '#fff9c2',
  'yellow-lightest': '#fcfbeb',

  'yellow-100': '#fffff0',
  'yellow-200': '#fefcbf',
  'yellow-300': '#faf089',
  'yellow-400': '#f6e05e',
  'yellow-500': '#ecc94b',
  'yellow-600': '#d69e2e',
  'yellow-700': '#b7791f',
  'yellow-800': '#975a16',
  'yellow-900': '#744210',

  'green-darkest': '#0f2f21',
  'green-darker': '#1a4731',
  'green-dark': '#1f9d55',
  green: '#38c172',
  'green-light': '#51d88a',
  'green-lighter': '#a2f5bf',
  'green-lightest': '#e3fcec',

  'green-100': '#f0fff4',
  'green-200': '#c6f6d5',
  'green-300': '#9ae6b4',
  'green-400': '#68d391',
  'green-500': '#48bb78',
  'green-600': '#38a169',
  'green-700': '#2f855a',
  'green-800': '#276749',
  'green-900': '#22543d',

  'teal-darkest': '#0d3331',
  'teal-darker': '#20504f',
  'teal-dark': '#38a89d',
  teal: '#4dc0b5',
  'teal-light': '#64d5ca',
  'teal-lighter': '#a0f0ed',
  'teal-lightest': '#e8fffe',

  'teal-100': '#e6fffa',
  'teal-200': '#b2f5ea',
  'teal-300': '#81e6d9',
  'teal-400': '#4fd1c5',
  'teal-500': '#38b2ac',
  'teal-600': '#319795',
  'teal-700': '#2c7a7b',
  'teal-800': '#285e61',
  'teal-900': '#234e52',

  'blue-darkest': '#12283a',
  'blue-darker': '#1c3d5a',
  'blue-dark': '#2779bd',
  blue: '#3490dc',
  'blue-light': '#6cb2eb',
  'blue-lighter': '#bcdefa',
  'blue-lightest': '#eff8ff',

  'blue-100': '#ebf8ff',
  'blue-200': '#bee3f8',
  'blue-300': '#90cdf4',
  'blue-400': '#63b3ed',
  'blue-500': '#4299e1',
  'blue-600': '#3182ce',
  'blue-700': '#2b6cb0',
  'blue-800': '#2c5282',
  'blue-900': '#2a4365',

  'indigo-darkest': '#191e38',
  'indigo-darker': '#2f365f',
  'indigo-dark': '#5661b3',
  indigo: '#6574cd',
  'indigo-light': '#7886d7',
  'indigo-lighter': '#b2b7ff',
  'indigo-lightest': '#e6e8ff',

  'indigo-100': '#ebf4ff',
  'indigo-200': '#c3dafe',
  'indigo-300': '#a3bffa',
  'indigo-400': '#7f9cf5',
  'indigo-500': '#667eea',
  'indigo-600': '#5a67d8',
  'indigo-700': '#4c51bf',
  'indigo-800': '#434190',
  'indigo-900': '#3c366b',

  'purple-darkest': '#21183c',
  'purple-darker': '#382b5f',
  'purple-dark': '#794acf',
  purple: '#9561e2',
  'purple-light': '#a779e9',
  'purple-lighter': '#d6bbfc',
  'purple-lightest': '#f3ebff',

  'purple-100': '#faf5ff',
  'purple-200': '#e9d8fd',
  'purple-300': '#d6bcfa',
  'purple-400': '#b794f4',
  'purple-500': '#9f7aea',
  'purple-600': '#805ad5',
  'purple-700': '#6b46c1',
  'purple-800': '#553c9a',
  'purple-900': '#44337a',

  'pink-darkest': '#451225',
  'pink-darker': '#6f213f',
  'pink-dark': '#eb5286',
  pink: '#f66d9b',
  'pink-light': '#fa7ea8',
  'pink-lighter': '#ffbbca',
  'pink-lightest': '#ffebef',

  'pink-100': '#fff5f7',
  'pink-200': '#fed7e2',
  'pink-300': '#fbb6ce',
  'pink-400': '#f687b3',
  'pink-500': '#ed64a6',
  'pink-600': '#d53f8c',
  'pink-700': '#b83280',
  'pink-800': '#97266d',
  'pink-900': '#702459',
}

module.exports = {
  theme: {
    colors,
    extend: {},
  },
  variants: {},
  plugins: [...Object.keys(plugins).map((name) => plugins[name]())],
  future: {
    removeDeprecatedGapUtilities: true,
    purgeLayersByDefault: true,
  },
}