DEV Community

Cover image for How to use all TailwindCSS colors in your project
Mattèo Gauthier
Mattèo Gauthier

Posted on

How to use all TailwindCSS colors in your project

Hey if you wanted to use the brand new TailwindCSS color palette :
Alt Text

How to add the brand new palettes

Step 1/2

Add the full-palette dependencies

yarn add full-palette --dev
Enter fullscreen mode Exit fullscreen mode

Step 2/2

Open the tailwind.config.js

module.exports = {
  purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
  darkMode: false,
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  presets: [require('full-palette')], // The line to add :D
  plugins: [],
}
Enter fullscreen mode Exit fullscreen mode

And add the require('full-palette') to the presets properties in the tailwind config.

And that's it, thanks for reading this post :D

Discussion (0)