DEV Community

nrikiji
nrikiji

Posted on

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",
      ・・・
        },
      },
    },
  },
  ・・・
}
Enter fullscreen mode Exit fullscreen mode

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

<div class="bg-foo text-bar-buz"> ・・・</div>
Enter fullscreen mode Exit fullscreen mode

Use custom fonts

Read font file

html

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

or loaded with css

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

Specify font name and font family

tailwind.config.js

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

font-fancy can be used.

html

<span class="font-fancy">・・・</span>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

html

<button class="custom-btn">Button</button>
Enter fullscreen mode Exit fullscreen mode

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; }
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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",
  }
}
Enter fullscreen mode Exit fullscreen mode

In this case, it operates as a dark mode

<html class="dark">
  ・・・
  <div class="bg-white dark:bg-black">
    ・・・
  </div>
</html>
Enter fullscreen mode Exit fullscreen mode

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)",
      }
    },
  },
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

Apply by specifying the class name of the theme

<div class="custom-theme">
  <button class="bg-primary text-primary-text">Button</button>
</div>
Enter fullscreen mode Exit fullscreen mode

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

Discussion (0)