DEV Community

loading...
Cover image for How to use all TailwindCSS colors in your project

How to use all TailwindCSS colors in your project

matteogauthier profile image Mattèo Gauthier ・1 min read

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)

pic
Editor guide