Tailwind CSS provides a wealth of pre-defined utilities to help web developers create responsive and interactive web designs and layouts. One such utility is @apply — a Tailwind CSS directive that allows developers to combine a collection of utilities into a reusable component class. In this article, we will dive deep into the @apply directive, highlight its usefulness, and discover how it can potentially replace the need for complex classes in Tailwind CSS.
What is Tailwind CSS?
Tailwind CSS is an open-source utility-based CSS framework that provides a set of customizable utilities for constructing web designs and layouts.
The key difference between Tailwind CSS and other popular CSS frameworks like Bootstrap and Material UI is that it does not contain a collection of preset classes for components such as buttons and tables. Instead, it includes extensive utility classes for grids, margins, forms, placement, and so forth.
Tailwind CSS automatically removes any extraneous CSS, resulting in the shortest CSS bundle possible when building for production.
How to install Tailwind CSS into your project
The Tailwind CLI tool is the quickest and easiest way to embed Tailwind CSS into your project from scratch. Check that you have Node.js installed before you begin.
Step 1: Install Tailwind CSS into your project with the following command:
npm install -D tailwindcss
Step 2: In your tailwind.config.js file, add the paths to all of your template files like this:
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
}
Step 4: Add your compiled CSS file to the <head> of your markup file and begin styling your content with Tailwind's utility classes.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="/styles.css" rel="stylesheet">
<title>Tailwind CSS Tutorial</title>
</head>
<body>
<div class="bg-gradient-to-t">
<aside class="rounded-sm"></aside>
<img src="/images/pig.jpg" alt="">
</div>
</body>
</html>
How to use the @apply directive in your next project
@apply allows you to reuse preset utility classes to style several components in your application. You can also combine its functionalities with other front-end frameworks, such as Bootstrap.
Consider the code below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- using Bootstrap CSS Classes -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<title>Tailwind CSS Tutorial</title>
<style>
@tailwind base;
@tailwind components;
/* applying utility classes to Bootstrap components */
.btn-primary {
@apply px-4 py-2 font-bold text-white bg-blue-500 rounded hover:bg-blue-700;
}
.btn-success {
@apply px-4 py-2 font-bold text-white bg-green-500 rounded hover:bg-green-700;
}
.btn-danger {
@apply px-4 py-2 font-bold text-white bg-red-500 rounded hover:bg-red-700;
}
@tailwind utilities;
</style>
</head>
<body>
<div class="m-1">
<button class="btn btn-primary">Button</button>
<button class="btn btn-success">Success Button</button>
<button class="btn btn-danger">Danger Button</button>
</div>
</body>
</html>
You may discover that the buttons share various utility classes. These utility classes can be used for the base styling of any variant of our buttons. Consider an application with 25 buttons. We must then write the common utility classes (used for base styling) 25 times. This can lead to maintenance issues, because updating the common utility classes requires you to do so in 25 different places throughout the app, which quickly becomes complex and redundant.
In such cases, you can use the @apply directive to convert standard utility classes into custom CSS classes. We can avoid duplicating the traditional utility classes this way.
We've extracted our utility classes into the btn class below:
<style>
@tailwind base;
@tailwind components;
/* grouping similar custom utility classes */
@layer components {
.btn {
@apply px-4 py-2 font-bold text-white rounded;
}
}
@tailwind utilities;
</style>
to get a better understanding of the @layer directive.
Using @apply with per-component CSS
Component frameworks like Svelte and Vue allow per-component styling within a <style> block in each component file. If you try to @apply a custom class defined in your global CSS to one of these per-component <style> blocks, you will encounter an error.
<style>
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer components {
.class {
background-color: theme(colors.blue);
border-radius: theme(borderRadius.lg);
box-shadow: theme(boxShadow.xl);
}
}
div {
/* Won't work because the styles are processed separately and individually */
@apply class;
}
</style>
In this manner, any Tailwind file that utilizes this config file will have access to those styles.
Conclusion
This article discussed the Tailwind CSS @apply directive, emphasizing some of its capabilities, use cases, and modes of operation. Because it reduces repetition in your project code base and allows for easy maintenance, the @apply directive has shown to be a better alternative to using complex classes. Because of its simplicity and ease of application, this component can be applied to much larger real-world endeavors.
I hope this article is valuable to you.
Happy coding!
SOCIAL SHARE CARD GENERATOR