Material Design Colours for Tailwind UI

Tafadzwa Muteke
Nov 5 · 2 min read
tailwindcss

I have recently started using Tailwind for my front-end design hacks. I have to admit it’s that good; really good.

Well, I have been accustomed to other UI design frameworks and systems, i.e. Material Design (mostly), haha. Material Design really has a lot of utilities, components and really cool patterns; and I’m in love with its colour palettes!

Yes, the colour palettes are golden!

So, coming to know Tailwind, which is just as cool, and learning about it, I also wanted to make my own custom styles — not too much though. P.S. I actually meant to write an article, before this one, about customising Tailwind in Angular (I’ll update this article if that goes live). So, adding Material Design Colours was no exception. It’s important to note that the default Tailwind theme already has some base colour palettes; that is just the same as that of Material Design Colour palettes, only limited.

Okay, enough talk, let’s make this customisation. (This is not to show you how you customise a Tailwind configuration file, but to give a bootstrap for Material Design Colours for Tailwind UI, okay…)

You can initialise a Tailwind configuration file in your project (where tailwindcss is already installed via npm). To do this enter the bash command below in the terminal and a tailwind.config.js file will be created.

npx tailwind init

Now add the following into the created configuration file and to make your configuration look the same:

Once, done build and use your new material design colours! You use them as you would any other preset colours in Tailwind.

Happy coding :)

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade