Do you find it frustrating to style your websites because of constraining design decisions that are hard to undo? Do you want a CSS framework where you can build bespoke designs easily with less-to-no coding? Let us introduce you to Tailwind CSS - a utility-first CSS framework that can revolutionize the way you style your website and applications with a unique approach. Read to find out more about Tailwind CSS and also learn how to implement it in your next Drupal project.
What is Tailwind CSS
Tailwind CSS is a CSS framework used for styling websites and applications. A framework that offers an easy styling process similar to bootstrap but with many useful features. It is a utility class based framework in that it has tons of pre-existing classes that work according to values, prefixes, and abbreviations that are self-explaining. Which means that with Tailwind, you can create custom components without writing any custom classes or code.
Why use Tailwind
As we previously mentioned, Tailwind CSS eases the frontend work because of its extensive built-in classes that you can simply call into any HTML element. So, this means you don’t have to leave your HTML file to customize any HTML code. It provides a default theme with preset values for color palette, fonts, breakpoints, spacing and much more. This theme is also highly customizable.
- Powerful - Makes the styling process faster because of it’s ready-to-use classes that can be further extended
- No-more Naming - You don’t have to rack your brain to come up with the most apt class name
- Reusability - Save your CSS file from bulking up by using and re-using classes
- Global Warning - Worry less about breaking the design because you don’t need to make global changes in the CSS file
- Responsive - Lets you build complex responsive interfaces with its broad set of utilities and breakpoint prefixes
- Improved Site Performance - Cleans out all the unnecessary code from your bulky CSS file. Usually ships less than 10kb of CSS.
- Easy Maintenance - maintaining HTML is much easier than maintaining a large CSS codebase
Installing Tailwind
There are many ways you can install Tailwind CSS. We’re going to discuss installing with the help of package managers, CDN and Drupal’s contributed modules.
Method 1: Using Package Managers
1. First, install a package manager like npm or yarn to install Tailwind.
2. Execute the following commands in order:
npm install -D tailwindcss
npx tailwindcss init3. Configure the Tailwind config file
4. Import the following directives in the CSS file:
@tailwind base;
@tailwind components;
@tailwind utilities;
5. Generate the CSS output by using command
npx tailwindcss -i ./src/<file-with-directive>.css -o ./<output-file>.css --watch6. Link output CSS file to HTML
Method 2: Installing it in Drupal using contributed modules
You can implement Tailwind CSS within Drupal using the following contributed modules:
- Tailwind CSS Starter Kit
- Tailwind CSS Utility
Tailwind CSS starter kit module is a starter kit or demo theme that you can use in Drupal. Simply install it using Composer or manually using Drush and enable it as your default theme. You are now ready to use all the Tailwind classes!
The Tailwind CSS Utility module adds tools for the Tailwind CSS framework. It lets you add styles to pages, sections, blocks and also integrates with Layout Builder.
Method 3: Using Tailwind CDN
To install Tailwind CSS using a CDN, add the following script to the <head> section of your HTML:
<script src="https://cdn.tailwindcss.com"></script>Example:
<html lang=”en”>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
<link rel=”stylesheet” href=”input.css”>
<title>Document</title>
</head>
<body>However, I do not recommend installing it using the CDN method as it lacks some functionality. For example, you cannot customize Tailwind’s default theme or install 3rd party plugins.
How to use it?
Now that you know how to install Tailwind CSS and add it in your project, using it is a breeze.
Simply head over to your HTML or Twig file. Add the CSS classes provided by Tailwind to any HTML element.
Now check output on the browser.
Final thoughts
Tailwind CSS is a highly customizable and lightweight framework that offers a lot of flexibility and control over HTML elements. It improves the speed and efficiency of development and results in an optimized application. However, because of its highly customizable and non-semantic utility classes, Tailwind could take longer to get familiar with. If you found this article helpful, consider subscribing to our weekly newsletter and get expert insights delivered to your inbox.
