Skip to content

Instantly share code, notes, and snippets.

@sebmellen
Last active November 4, 2023 15:38
Show Gist options
  • Star 10 You must be signed in to star a gist
  • Fork 3 You must be signed in to fork a gist
  • Save sebmellen/e939ce8a29fd6cb611ef6f283f700f2c to your computer and use it in GitHub Desktop.
Save sebmellen/e939ce8a29fd6cb611ef6f283f700f2c to your computer and use it in GitHub Desktop.
A tailwind.config.js file with the full color palette of Tailwind CSS 2.0, which I couldn't find available elsewhere. As of 2020-12-22, this config file works properly. Note that it will significantly increase the bundle size of your unpurged tailwind.css file!
// NOTE: AS REQUESTED, TAILWIND CSS 3.0 HAS FULL SUPPORT FOR ALL COLORS BY DEFAULT
// SEE https://tailwindcss.com/blog/tailwindcss-v3#every-color-out-of-the-box.
// As of 2020-12-22, this tailwind.config.js file includes all colors
// from the Tailwind CSS color palette reference laid out in full at this
// link: https://tailwindcss.com/docs/customizing-colors#color-palette-reference.
// Note that this will increase your unpurged Tailwind CSS file size immensely,
// for me it went from 3.64MB to 7.62MB! Be sure to purge your CSS in production!
// First we import the tailwindcss/colors dependency, as referenced
// here: https://tailwindcss.com/docs/customizing-colors#curating-colors
const colors = require("tailwindcss/colors");
module.exports = {
purge: ["./**/*.html", "./**/*.js"],
darkMode: false,
theme: {
extend: {},
colors: {
// Now we build the full color palette, using all colors available
// as shown at this link: https://tailwindcss.com/docs/customizing-colors#color-palette-reference
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,
sky: colors.sky,
blue: colors.blue,
indigo: colors.indigo,
violet: colors.violet,
purple: colors.purple,
fuchsia: colors.fuchsia,
pink: colors.pink,
rose: colors.rose,
},
},
variants: {},
plugins: [],
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment