Tailwind CSS Customization Summary
Tags: javascript, tailwindcss
Published: 2022-05-15 23:24:39

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
```js
module.exports = {
  ・・・
  theme: {
    extend: {
      colors: {
        "foo": "#f97316",
        "bar": {
	  "buz": "#65C18C",
	  ・・・
        },
      },
    },
  },
  ・・・
}
```

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

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

## Use custom fonts
Read font file

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

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

Specify font name and font family

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

`font-fancy` can be used.

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

Instructions for adding google fonts can be found in [this article](https://www.kamo-it.org/blog/21/)

## Putting the class together

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

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

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

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

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

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

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

These uses are quoted from [document](https://tailwindcss.com/docs/adding-custom-styles) 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

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

How to determine if it is in dark mode

tailwind.config.js
```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
<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
```js
module.exports = {
  theme: {
    extend: {
      colors: {
     　　  "primary": "var(--color-primary)",
     　　  "primary-text": "var(--color-primary-text)",
      }
    },
  },
}
```

Set color with `css`
```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
```html
<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