Tailwind CSS Customization Summary

Worked with tailwindcss 3.0.23

Add color theme

In tailwind, you can use bg-white for white background color, text-white for white text, etc., but you can use your own color in the white part.

tailwind.config.js

module.exports = {
  ・・・
  theme: {
    extend: {
      colors: {
        "foo": "#f97316",
        "bar": {
      "buz": "#65C18C",
      ・・・
        },
      },
    },
  },
  ・・・
}

Allows specifying background color foo and text color bar-buz.

<div class="bg-foo text-bar-buz">　・・・</div>

Use custom fonts

Read font file

html

<link href="https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap" rel="stylesheet" />

or loaded with css

@import url('https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap');

Specify font name and font family

tailwind.config.js

module.exports = {
  theme: {
    extend: {
      fontFamily: {
        fancy: ["Dancing Script"],
      },
    },
  },
}

font-fancy can be used.

html

<span class="font-fancy">・・・</span>

Instructions for adding google fonts can be found in this article

Putting the class together

Can create a class that summarizes tailwind classes with @apply.

css

.custom-btn {
  @apply w-20 h-20 m-5 p5 text-center;
}

html

<button class="custom-btn">Button</button>

The @layer determines the priority of the added style. In this case base < components < utilities.

@layer base {
  h1 { @apply text-2xl; }
}

@layer components {
  h1 { @apply text-4xl; }
}

@layer utilities {
  h1 { @apply text-5xl; }
}

These uses are quoted from document translated by

base

The base layer is for things like reset rules or default styles applied to plain HTML elements.

components

The components layer is for class-based styles that you want to be able to override with utilities.

utilities

The utilities layer is for small, single-purpose classes that should always take precedence over any other styles.

Toggle light/dark mode

dark: specifies class for dark mode

<div class="bg-white dark:bg-black">
  ・・・
</div>

How to determine if it is in dark mode

tailwind.config.js

module.exports = {
  // elements with dark class and below act as dark mode
  darkMode: "class",

  // dark mode is determined by os setting (default)
  // darkMode: "media",
  }
}

In this case, it operates as a dark mode

<html class="dark">
  ・・・
  <div class="bg-white dark:bg-black">
    ・・・
  </div>
</html>

Dynamically add and remove dark classes to switch between dark and light modes

Switch themes

Create the colors primary and primary-text in this example

tailwind.config.js

module.exports = {
  theme: {
    extend: {
      colors: {
     　　  "primary": "var(--color-primary)",
     　　  "primary-text": "var(--color-primary-text)",
      }
    },
  },
}

Set color with css

/* default theme */
:root {
  --color-primary: #ffffff;
  --color-primary-text: #000000;
}

/* alternate-theme */
.custom-theme {
  --color-primary: #000000;
  --color-primary-text: #ffffff;
}

Apply by specifying the class name of the theme

<div class="custom-theme">
  <button class="bg-primary text-primary-text">Button</button>
</div>

If you make the class name of the theme dynamic, you can switch the theme of the application for each user, for example.

Items that can be specified in tailwind.config.js and their default values

You can check it here.
https://github.com/tailwindlabs/tailwindcss/blob/master/stubs/defaultConfig.stub.js

Blog

Tailwind CSS Customization Summary

nrikiji

Add color theme

Use custom fonts

Putting the class together

Toggle light/dark mode

Switch themes

Items that can be specified in tailwind.config.js and their default values

Join Our Newsletter. No Spam, Only the good stuff.

Related