Tailwind CSS offers out of the box support for theming your project. With Tailwind CSS, you can offer multicolor theme feature in your project with few lines of code.
Live Demo: https://scriptmint.github.io/tailwind-theme/
Github Repo: https://github.com/scriptmint/tailwind-theme
So lets setup a Multicolor Theme project with Tailwind CSS. Open your terminal & start working.
mkdir tailwind-theme
cd tailwind-theme
npm install -D tailwindcss
npx tailwindcss init
This will generate a tailwind.config.js file in your directory. Lets make little modification here.
module.exports = {
content: ["./*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
}
Here we are defining the directory & its files where we will write some CSS classes and all other unused classes which are generated in the Tailwind CSS will be purged.
Next, lets create a css file /src/app.css.
@tailwind base;
@tailwind components;
.theme-first {
--color-primary: #1e293b;
--color-secondary: #e2e8f0;
}
.theme-second {
--color-primary: #991b1b;
--color-secondary: #fecaca;
}
.theme-third {
--color-primary: #166534;
--color-secondary: #bbf7d0;
}
@tailwind utilities;
We have setup three themes with primary & secondary color along with default tailwind setup.
We will need to configure our tailwind.config.js file again as below:
const colors = require('tailwindcss/colors')
module.exports = {
content: ["./*.{html,js}"],
theme: {
textColor: {
"primary" : "var(--color-primary)",
"secondary" : "var(--color-secondary)",
...colors
},
backgroundColor: {
"primary" : "var(--color-primary)",
"secondary" : "var(--color-secondary)",
...colors
},
extend: {},
},
plugins: [],
}
This will generate "text-primary", "text-secondary", "bg-primary" & "bg-secondary" class with given theme color.
As mentioned earlier, Tailwind CSS offers out of the box support for themes. We are defining text & background colors which will be picked up based on the current theme.
So, its time to create your html file to so the Tailwind magic:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="https://scriptmint.com/images/favicons/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Tailwind Theme CSS</title>
<link href="/dist/app.css" rel="stylesheet">
</head>
<body class="theme-first">
<div class="h-screen w-full flex items-center justify-center bg-primary">
<div class="space-y-4">
<h1 class="text-secondary text-center">Hello World!</h1>
</div>
</div>
</body>
</html>
Here we are adding "theme-first" class on the body element. You can change this class to "theme-second" or "theme-third" to get the desired color theme.
Next, lets build our CSS file using below command:
npx tailwindcss -i ./src/app.css -o ./dist/app.css
This will generate your css file under "dist" directory. Link this css file in our HTML directory and visit on your browser.
Bonus - Dark Theme Setup
You need not to add another theme to offer dark theme in your project. You can add one line in the tailwind.config.js file as below:
module.exports = {
content: ["./*.{html,js}"],
darkMode: 'class',
theme: {
...
...
Here we are defining darkMode property to "class". Now, you can put "dark" class in the body element to get the desired result. Also, you can now define the dark theme color using "dark:" modifier like we added "dark:bg-gray-800" class.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="https://scriptmint.com/images/favicons/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Tailwind Theme CSS</title>
<link href="/dist/app.css" rel="stylesheet">
</head>
<body class="theme-first">
<div class="h-screen w-full flex items-center justify-center bg-primary dark:bg-gray-800">
<div class="space-y-4">
<h1 class="text-secondary dark:text-gray-200 text-center">Hello World!</h1>
</div>
</div>
</body>
</html>
Tailwind offers various configurations which you can even use to change fonts, borders, radius etc with this theme configuration. You can read more about Tailwind CSS theme at https://tailwindcss.com/docs/theme
Top comments (0)