owned this note
owned this note
Published
Linked with GitHub
# How to Create Custom Themes with Tailwind CSS 4?
## Table of Contents:
- [Introduction to Tailwind CSS and What's New in Version 4](https://hackmd.io/tvwh4P7QSqOf_yjkQhaBwg?view#Introduction-to-Tailwind-CSS-and-Whats-New-in-Version-4)
- [Setting Up Your Project](https://hackmd.io/tvwh4P7QSqOf_yjkQhaBwg?view#Setting-Up-Your-Project)
- [Exploring the `@theme` Directive and Theme Variables in Tailwind CSS](https://hackmd.io/tvwh4P7QSqOf_yjkQhaBwg?view#Exploring-the-theme-Directive-and-Theme-Variables-in-Tailwind-CSS)
- [Creating Your Own Custom Theme](https://hackmd.io/tvwh4P7QSqOf_yjkQhaBwg?view#Exploring-the-theme-Directive-and-Theme-Variables-in-Tailwind-CSS)
- [Creating Custom Components](https://hackmd.io/tvwh4P7QSqOf_yjkQhaBwg?view#Creating-Custom-Components)
- [Alternatives If You Prefer Not to Create Your Own Theme](https://hackmd.io/tvwh4P7QSqOf_yjkQhaBwg?view#Alternatives-If-You-Prefer-Not-to-Create-Your-Own-Theme)
- [How to Set Up FlyonUI and Use Its Themes in Your Project](https://hackmd.io/tvwh4P7QSqOf_yjkQhaBwg?view#How-to-Set-Up-FlyonUI-and-Use-Its-Themes-in-Your-Project)
- [Conclusion](https://hackmd.io/tvwh4P7QSqOf_yjkQhaBwg?view#Conclusion)
## Introduction to Tailwind CSS and What's New in Version 4
Tailwind CSS is a utility-first framework that makes designing custom websites much easier. Unlike other frameworks that come with pre-designed components, Tailwind provides a set of low-level utility classes that let you style elements directly in your HTML. This approach enables faster, more flexible customization of your designs.
### New Features in Tailwind CSS v4:
- **Boosted Performance:** With the new Oxide engine, Tailwind v4 speeds up the build process, making full builds up to five times faster and incremental builds more than 100 times quicker.
- **Easier Setup:** Version 4 simplifies installation by reducing dependencies and eliminating complex configuration steps. Now, all you need is a single line of code in your CSS file to get started.
- **CSS-First Customization:** Customizing Tailwind is now more straightforward and happens directly within CSS using the `@theme` directive, removing the need for JavaScript-based setups.
- **Automatic Content Detection:** The framework now automatically detects your template files, saving you the hassle of manual configuration.
- **Advanced CSS Features:** Tailwind CSS v4 takes advantage of modern CSS features such as native cascade layers, custom properties, and the `color-mix()` function, giving developers more control over styling.
- **Support for Container Queries:** With built-in container queries support, Tailwind v4 allows you to apply styles based on the size of parent containers, making responsive design even easier to implement.
These updates make Tailwind CSS v4 a more powerful tool for creating fast, responsive, and highly customizable web applications.
## Setting Up Your Project
### Step 1: Install Tailwind CSS
Get started by installing Tailwind CSS and the @tailwindcss/cli packages.
```bash
npm install tailwindcss @tailwindcss/cli
```
### Step 2: Import Tailwind in your CSS
Include the `@import "tailwindcss";` statement in your primary CSS file.
```css
@import "tailwindcss";
```
### Step 3: Start the Tailwind CLI build process
Run the CLI tool to analyze your source files for classes and generate the final CSS.
```bash
npx @tailwindcss/cli -i ./src/main.css -o ./src/new.css --watch
```
### Step 4: Start using Tailwind in your HTML
Link your compiled CSS file in the `<head>` section and begin applying Tailwind’s utility classes to style your content.
```html
<html>
<head>
<link href="./new.css" rel="stylesheet">
</head>
<body>
<h1 class="text-3xl text-blue-300 font-semibold">
Set Up is Complete!
</h1>
</body>
</html>
```
## Exploring the `@theme` Directive and Theme Variables in Tailwind CSS
In Tailwind CSS, the `@theme` directive lets you create custom design tokens—such as colors, fonts, and spacing—by defining CSS variables. These variables serve as the core for Tailwind's utility classes, helping you maintain a consistent and easily adjustable design system.
To customize your project's color palette, you can define new color variables within the `@theme` block:
```css
@import "tailwindcss";
@theme {
--color-primary: #3490dc;
--color-secondary: #ffed4a;
--color-accent: #38c172;
}
```
In the code above, `--font-*`*, `--color-*`*, and `--radius-*` are examples of theme variable namespaces. By creating new variables within these namespaces, you unlock corresponding utilities and variants in your project. For a full list of namespaces supported by Tailwind, you can check out the official [documentation](https://tailwindcss.com/docs/theme#theme-variable-namespaces).
### Using Theme Variables in Your Custom CSS
In addition to utility classes, you can also use theme variables in your custom CSS to maintain consistency with your overall design system:
```css
.button {
background-color: var(--color-primary);
color: var(--color-white);
padding: 0.5rem 1rem;
border-radius: 0.25rem;
}
```
### Advantages of the `@theme` Directive
- **Centralized Design Control**: Define all your design tokens in one place, making global design changes simpler.
- **Better Consistency**: Achieve uniform styling throughout your project by using shared design values.
- **Easier Maintenance**: Quickly adjust design elements by updating theme variables, without the need to make changes in multiple locations.
## Creating Your Own Custom Theme
To start, we will define a set of CSS variables that represent our theme’s design tokens, including fonts, colors, and border radius. These variables will lay the foundation for building our unique custom theme.
```css
@theme{
--font-display: "Lato", "sans-serif";
--color-primary: oklch(82% 0.111 230.318);
--color-secondary: oklch(80% 0.114 19.571);
--color-accent: oklch78% 0.115 274.713);
--color-base: oklch(98% 0 0);
--tw-shadow-color: oklch(0.17 0.0296 208.59 / 40%);
--radius-box: 0.5rem;
--radius-btn: 0.375rem;
}
```
Now you have your own custom theme in place.
## Creating Custom Components
In Tailwind CSS, you can easily create custom components by using the `@layer components` directive. This allows you to define reusable styles for elements throughout your project. Below is an example of how you can create custom button components:
```css
@layer components {
.btn {
@apply bg-neutral-600 text-neutral-200 font-medium py-2 px-4 rounded-btn active:scale-95 transition duration-300;
}
.btn-primary {
@apply bg-primary text-gray-700;
}
.btn-secondary {
@apply bg-secondary text-gray-700;
}
.btn-accent {
@apply bg-accent text-gray-700;
}
}
```
### What’s Happening in the Code
- The `.btn` class defines the base styling for the button, including padding, colors, border-radius, and a smooth transition effect for interactions.
- The `.btn-primary`, `.btn-secondary`, and `.btn-accent` classes add variations, customizing the button's background color using your theme's color variables.
Custom components make your styling process more efficient and help keep your code organized.
## Alternatives If You Prefer Not to Create Your Own Theme
If you'd rather not build your own theme from scratch, FlyonUI - [Tailwind UI](https://flyonui.com/) Component Library is a great alternative. It’s a free, open-source Tailwind CSS component library that comes with semantic classes and 12 pre-made themes that look great right out of the box.
FlyonUI includes a variety of pre-designed CSS and JavaScript components, plus useful third-party plugins to help speed up your development. Each theme is easy to customize, so you can adjust it to fit your project without starting from scratch.
Here are the themes that FlyonUI provides.
## How to Set Up FlyonUI and Use Its Themes in Your Project
### Step 1: Install FlyonUI
Start by adding FlyonUI to your project with this command:
```bash
npm install flyonui
```
### Step 2: Add FlyonUI plugin
Next, add the FlyonUI plugin to your `global.css` file.
```bash
@plugin "flyonui";
@import "flyonui/variants.css";
@import "./node_modules/flyonui/variants.css"; /* Require only if you want to use FlyonUI JS component */
```
### Step 3: Activate all themes
To enable all 12 pre-built themes, set the `themes` option to `all`:
```css
@import "tailwindcss";
@plugin "flyonui" {
themes: all;
}
```
Or, if you prefer to use a specific theme, for example, `mintlify` ,use this:
```css
@import "tailwindcss";
@plugin "flyonui" {
themes: mintlify;
}
```
### Step 4: Apply theme to your HTML
To apply the `mintlify` theme to your page, simply use this HTML:
```html
<html data-theme="mintlify">
<body>
<script src="../node_modules/flyonui/flyonui.js"></script> //Require only if you want to use FlyonUI JS component
</body>
</html>
```
And you're all set! Now you can start using the theme in your template.😃
## Conclusion
Building a custom theme with Tailwind CSS gives you full control over your design, allowing you to create a unique and cohesive look for your project. By understanding how to work with Tailwind's `@theme` directive, you can easily customize colors, fonts, and other design tokens to match your vision. And if creating your own theme feels like too much work, FlyonUI is a great alternative with pre-made, customizable themes that can save you time and effort.
Whether you choose to design from scratch or use a [Tailwind Components library](https://flyonui.com/) like FlyonUI, Tailwind CSS provides all the flexibility and tools you need to build beautiful, responsive websites quickly and efficiently. The possibilities are endless—so go ahead and start experimenting with your own designs!
Google Drive
Gist
Clipboard
Sign in with Wallet
