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
Top comments (0)