How to use all TailwindCSS colors in your project

#tailwindcss #javascript #tutorial #styling

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

How to add the brand new palettes

Step 1/2

Add the full-palette dependencies

yarn add full-palette --dev

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: [],
}

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

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

Top comments (2)

abhishek • Nov 21 '23

To incorporate all Tailwind CSS colors in your project, leverage the extensive color palette provided by Tailwind. Use the "bg-" and "text-" utility classes along with the corresponding color names to apply background and text colors to elements. Tailwind offers a comprehensive spectrum of shades and hues, allowing you to choose colors that suit your design. Explore hover, focus, and active variants for interactive elements. Customize colors further by adjusting your Tailwind configuration file. With strategic application of Tailwind CSS color classes, you can effortlessly achieve a cohesive and visually appealing design throughout your project.

For further, you can read this blog : The Ultimate Guide To Tailwind Colors And Personalizing Them - Purecode