How to Use Custom Colors in Tailwind CSS

In this section we will see how to use custom colors in tailwind css. we will see, text custom color, custom background color , setup tailwind custom color example with Tailwind CSS 3.

How to install & setup Tailwind CSS v3

Example 1

Tailwind CSS custom text colors.

<h1 class="text-[#cc00ff] text-2xl">Tailwind CSS custom text color</h1>
<h1 class="text-[#0066ff] text-2xl">Tailwind CSS custom text color</h1>
<h1 class="text-[#8cff1a] text-2xl">Tailwind CSS custom text color</h1>

tailwind v3 custom color

Example 2

Tailwind CSS custom background color with custom text color.

<h1 class="text-[#ffffff] bg-[#cc00ff] text-2xl">Tailwind CSS custom background color with text color</h1>
<h1 class="text-[#80b3ff] bg-[#0066ff] text-2xl">Tailwind CSS custom background color with text color</h1>
<h1 class="text-[#006600] bg-[#8cff1a] text-2xl">Tailwind CSS custom background color with text color</h1>

Example 3

Setup custom tailwind color in tailwind.config.js. Before config custome color you need to install & setup tailwind css v3.

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      colors: {
        brown: {
          50: '#fdf8f6',
          100: '#f2e8e5',
          200: '#eaddd7',
          300: '#e0cec7',
          400: '#d2bab0',
          500: '#bfa094',
          600: '#a18072',
          700: '#977669',
          800: '#846358',
          900: '#43302b',
        },
      }
    },
  },
  plugins: [],
}

<div class="flex h-screen items-center flex-col justify-center">
  <h1 class="text-brown-50">Tailwind css custome color</h1>
  <h1 class="text-brown-100">Tailwind css custome color</h1>
  <h1 class="text-brown-200">Tailwind css custome color</h1>
  <h1 class="text-brown-300">Tailwind css custome color</h1>
  <h1 class="text-brown-400">Tailwind css custome color</h1>
  <h1 class="text-brown-500">Tailwind css custome color</h1>
  <h1 class="text-brown-600">Tailwind css custome color</h1>
  <h1 class="text-brown-700">Tailwind css custome color</h1>
  <h1 class="text-brown-800">Tailwind css custome color</h1>
  <h1 class="text-brown-900">Tailwind css custome color</h1>
</div>

See Demo

setup custom colors in tailwind css