Skip to content

Instantly share code, notes, and snippets.

@breadthe

breadthe/tailwindcss-1.x-colors-plugin.config.js

Created January 6, 2021 14:08
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save breadthe/79294087891abf374d5007c2c073bde8 to your computer and use it in GitHub Desktop.
Save breadthe/79294087891abf374d5007c2c073bde8 to your computer and use it in GitHub Desktop.
Download ZIP
Tailwind 2.x config
Raw
tailwindcss-1.x-colors-plugin.config.js
const plugin = require('tailwindcss/plugin');
const production = !process.env.ROLLUP_WATCH;
module.exports = {
purge: {
enabled: production,
content: [
'./src/**/*.html',
'./src/**/*.svelte',
],
},
theme: {
colors: {
transparent: 'transparent',
current: 'currentColor',
black: '#000',
white: '#fff',
gray: {
100: '#f7fafc',
200: '#edf2f7',
300: '#e2e8f0',
400: '#cbd5e0',
500: '#a0aec0',
600: '#718096',
700: '#4a5568',
800: '#2d3748',
900: '#1a202c',
},
red: {
100: '#fff5f5',
200: '#fed7d7',
300: '#feb2b2',
400: '#fc8181',
500: '#f56565',
600: '#e53e3e',
700: '#c53030',
800: '#9b2c2c',
900: '#742a2a',
},
orange: {
100: '#fffaf0',
200: '#feebc8',
300: '#fbd38d',
400: '#f6ad55',
500: '#ed8936',
600: '#dd6b20',
700: '#c05621',
800: '#9c4221',
900: '#7b341e',
},
yellow: {
100: '#fffff0',
200: '#fefcbf',
300: '#faf089',
400: '#f6e05e',
500: '#ecc94b',
600: '#d69e2e',
700: '#b7791f',
800: '#975a16',
900: '#744210',
},
green: {
100: '#f0fff4',
200: '#c6f6d5',
300: '#9ae6b4',
400: '#68d391',
500: '#48bb78',
600: '#38a169',
700: '#2f855a',
800: '#276749',
900: '#22543d',
},
teal: {
100: '#e6fffa',
200: '#b2f5ea',
300: '#81e6d9',
400: '#4fd1c5',
500: '#38b2ac',
600: '#319795',
700: '#2c7a7b',
800: '#285e61',
900: '#234e52',
},
blue: {
100: '#ebf8ff',
200: '#bee3f8',
300: '#90cdf4',
400: '#63b3ed',
500: '#4299e1',
600: '#3182ce',
700: '#2b6cb0',
800: '#2c5282',
900: '#2a4365',
},
indigo: {
100: '#ebf4ff',
200: '#c3dafe',
300: '#a3bffa',
400: '#7f9cf5',
500: '#667eea',
600: '#5a67d8',
700: '#4c51bf',
800: '#434190',
900: '#3c366b',
},
purple: {
100: '#faf5ff',
200: '#e9d8fd',
300: '#d6bcfa',
400: '#b794f4',
500: '#9f7aea',
600: '#805ad5',
700: '#6b46c1',
800: '#553c9a',
900: '#44337a',
},
pink: {
100: '#fff5f7',
200: '#fed7e2',
300: '#fbb6ce',
400: '#f687b3',
500: '#ed64a6',
600: '#d53f8c',
700: '#b83280',
800: '#97266d',
900: '#702459',
},
},
fontSize: {
xs: '0.75rem',
sm: '0.875rem',
base: '1rem',
lg: '1.125rem',
xl: '1.25rem',
'2xl': '1.5rem',
'3xl': '1.875rem',
'4xl': '2.25rem',
'5xl': '3rem',
'6xl': '4rem',
},
extend: {
fontFamily: {
'sans': [
'Roboto',
// 'Raleway',
'system-ui',
'BlinkMacSystemFont',
'-apple-system',
'Segoe UI',
'Oxygen',
'Ubuntu',
'Cantarell',
'Fira Sans',
'Droid Sans',
'Helvetica Neue',
'sans-serif',
],
'serif': [
'Bitter',
'Merriweather',
'Constantia',
'Lucida Bright',
'Lucidabright',
'Lucida Serif',
'Lucida',
'DejaVu Serif',
'Bitstream Vera Serif',
'Liberation Serif',
'Georgia',
'serif',
],
'mono': [
'Source Code Pro',
'Menlo',
'Monaco',
'Consolas',
'Liberation Mono',
'Courier New',
'monospace',
]
},
},
cursor: {
wait: 'wait',
},
screens: {
'smallest': '820px', // based on minimum window width
'dark': { 'raw': '(prefers-color-scheme: dark)' },
}
},
variants: {
boxShadow: ['hover', 'focus', 'focus-visible'],
borderStyle: ['hover'],
textColor: ['hover', 'group-hover', 'disabled'],
},
plugins: [
plugin(function ({ addVariant, e }) {
// Shows the button shadow outline only when using the keyboard, not when clicking
addVariant('focus-visible', ({ modifySelectors, separator }) => {
modifySelectors(({ className }) => {
return `.${e(`focus-visible${separator}${className}`)}[data-focus-visible-added]`
})
})
})
]
}
Raw
tailwindcss-1.x-colors.config.js
const production = !process.env.ROLLUP_WATCH;
module.exports = {
purge: {
enabled: production,
content: [
'./src/**/*.html',
'./src/**/*.svelte',
],
options: {
safelist: [
'border-blue-300',
'border-orange-500',
'border-pink-100',
'border-pink-900',
'dark',
'from-blue-500',
'from-blue-700',
'from-yellow-200',
'text-pink-100',
'text-pink-900',
'to-blue-800',
'to-pink-300',
'to-purple-800',
'to-yellow-500',
],
}
},
darkMode: 'class', // 'media' / 'class' / 'false'
theme: {
colors: {
transparent: 'transparent',
current: 'currentColor',
black: '#000',
white: '#fff',
gray: {
100: '#f7fafc',
200: '#edf2f7',
300: '#e2e8f0',
400: '#cbd5e0',
500: '#a0aec0',
600: '#718096',
700: '#4a5568',
800: '#2d3748',
900: '#1a202c',
},
red: {
100: '#fff5f5',
200: '#fed7d7',
300: '#feb2b2',
400: '#fc8181',
500: '#f56565',
600: '#e53e3e',
700: '#c53030',
800: '#9b2c2c',
900: '#742a2a',
},
orange: {
100: '#fffaf0',
200: '#feebc8',
300: '#fbd38d',
400: '#f6ad55',
500: '#ed8936',
600: '#dd6b20',
700: '#c05621',
800: '#9c4221',
900: '#7b341e',
},
yellow: {
100: '#fffff0',
200: '#fefcbf',
300: '#faf089',
400: '#f6e05e',
500: '#ecc94b',
600: '#d69e2e',
700: '#b7791f',
800: '#975a16',
900: '#744210',
},
green: {
100: '#f0fff4',
200: '#c6f6d5',
300: '#9ae6b4',
400: '#68d391',
500: '#48bb78',
600: '#38a169',
700: '#2f855a',
800: '#276749',
900: '#22543d',
},
teal: {
100: '#e6fffa',
200: '#b2f5ea',
300: '#81e6d9',
400: '#4fd1c5',
500: '#38b2ac',
600: '#319795',
700: '#2c7a7b',
800: '#285e61',
900: '#234e52',
},
blue: {
100: '#ebf8ff',
200: '#bee3f8',
300: '#90cdf4',
400: '#63b3ed',
500: '#4299e1',
600: '#3182ce',
700: '#2b6cb0',
800: '#2c5282',
900: '#2a4365',
},
indigo: {
100: '#ebf4ff',
200: '#c3dafe',
300: '#a3bffa',
400: '#7f9cf5',
500: '#667eea',
600: '#5a67d8',
700: '#4c51bf',
800: '#434190',
900: '#3c366b',
},
purple: {
100: '#faf5ff',
200: '#e9d8fd',
300: '#d6bcfa',
400: '#b794f4',
500: '#9f7aea',
600: '#805ad5',
700: '#6b46c1',
800: '#553c9a',
900: '#44337a',
},
pink: {
100: '#fff5f7',
200: '#fed7e2',
300: '#fbb6ce',
400: '#f687b3',
500: '#ed64a6',
600: '#d53f8c',
700: '#b83280',
800: '#97266d',
900: '#702459',
},
},
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
Raw
tailwindcss-2.x-colors.config.js
const colors = require('tailwindcss/colors')
const production = !process.env.ROLLUP_WATCH;
module.exports = {
purge: {
enabled: production,
content: [
'./src/**/*.html',
'./src/**/*.svelte',
],
},
darkMode: false, // or 'media' or 'class'
theme: {
colors: {
transparent: 'transparent',
current: 'currentColor',
black: '#000',
white: '#fff',
bluegray: colors.blueGray,
coolgray: colors.coolGray,
gray: colors.gray,
truegray: colors.trueGray,
warmgray: colors.warmGray,
red: colors.red,
orange: colors.orange,
amber: colors.amber,
yellow: colors.yellow,
lime: colors.lime,
green: colors.green,
emerald: colors.emerald,
teal: colors.teal,
cyan: colors.cyan,
lightblue: colors.lightBlue,
blue: colors.blue,
indigo: colors.indigo,
violet: colors.violet,
violet: colors.violet,
purple: colors.purple,
fuchsia: colors.fuchsia,
pink: colors.pink,
rose: colors.rose,
},
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment