Material-colors-tailwindcss

Material-colors-tailwindcss is a package that contains the material colors palette for easy use in tailwindcss config.

Installation

npm:

npm install -D material-colors-tailwindcss

yarn:

yarn add -D material-colors-tailwindcss

pnpm:

pnpm add -D material-colors-tailwindcss

implementation in tailwind.config.js

import {colors} from 'material-colors-tailwind'

module.exports = {
  content: [
    "./src/**/*.{html,ts}",
  ],
  theme: {
    colors: {...colors},
    extend: {},
  },
  plugins: [],
}

If you want to use only a few colors, you can import them individually.

import {amber, grey} from 'material-colors-tailwind'

module.exports = {
  content: [
    "./src/**/*.{html,ts}",
  ],
  theme: {
    colors: {},
    extend: {
        colors: {
            ...amber,
            ...grey,
        },
    },
  },
  plugins: [],
}

Implementation in HTML

<div class="bg-red-500 text-onRed-500">Hello world!</div>