How To Integrate Drupal And Tailwind CSS: A Step-By-Step Guide

After executing this command, we will be able to see the compiled version of the Tailwindcss in the dist folder.At LN Webworks, our team of Drupal experts are always ready to assist you. Contact us today to schedule your free consultation!

A brief About Tailwind CSS

Tailwind CSS offers limited benefits but assures you the flexibility and power to create your unique site. first, install Node Package Manager in your system through the command
sudo apt install npm

  • With less custom CSS, in Tailwind you can style elements directly in HTML by pre-existing styles. 
  • You can now manage your CSS file size by not constantly coding and growing the file size. By reusing old data you can now store files without dreading file size. 
  • No need to worry about class names because it is done with the help of a pre-designed system. 

A Brief About Drupal

Drupal 10 is the latest version and contains new features that make it unchallenging for developers. Now we will be adding Tailwind to our Drupal site. For that, we can add a library namely tailwind, and give it a CSS path of the dist/index.css. That means where we have our compiled tailwind.

  1. The best part of using Drupal is you can customize and explore a wide range of themes, and templates available. 
  2. Drupal is flexible and adaptable, making it perfect for creating websites without worrying about a bunch of things. 
  3. No need to worry about security measures. 
  4. Take care of SEO. 
  5. Genuine support from the community. 

Why Integrating Drupal with Tailwind CSS? 

You have a brief idea of both Drupal and Tailwind CSS. Both are beneficial and scalable for web developers. Integration of Drupal with Tailwind CSS offers you multiple benefits with adaptability and flexibility. 

  • Reusable design templates.
  • All types of screen sizes.
  • Layouts are constant on different kinds of devices.

Step By Step Guide to Integrating Drupal with Tailwind CSS

Step 1: Create a custom theme

It’s hectic and time-consuming when it comes to making something that takes a long time. Yes, we are talking about CSS stylesheets. It’s not easy to design a website because it’s not ‘effortless’. For this tutorial, I am using the page.html.twig file and adding a red background color by including the class bg-blue-500 in the markup. Clear the cache and check the output. Our Tailwind CSS class has applied the desired background color.Create a custom themeWe will create a Drupal custom theme and then integrate Tailwind CSS into the same.Run npm run watch-tailwind to compile the css In the package.json file, we will be adding the scripts dev and watch which can be executed using npm run dev & npm run watch or using yarn dev & yarn watch.Image 2In this blog, we will talk about the Integration of Drupal and Tailwood CSS to make this process a little bit easier for you. tailwind theme

 Step 2: Install and set up Tailwind CSS

Now let’s install Tailwind and its dependencies and also configure it.Tailwind CSS adopts a utility-first approach rather than building a class for the component. Tailwind CSS is a utility-first approach that makes creating applications faster and easierBefore installing Tailwind you need to follow following stepsCreate a folder where the Tailwind CSS will be compiled. On the same level as the src folder, create a folder named dist (or any name you prefer).The script dev compiles the code once as per command while the watch command keeps a watch on any change.image 5image 4You are already aware of Drupal, Drupal is an open-source CMS (content management system). The strong features and adaptability of Drupal make it popular among web developers. npx tailwindcss build src/index.css -o dist/index.css@tailwind base;
@tailwind components;
@tailwind utilities;create a CSS file Tailwind CSS along with Drupal works wonders for web developers. Both individually have tons of benefits and when integrated here’s what you can make out of it. Now you have access to flexibility, adaptability, and security, Multiple features with maximum benefits. Elevate your web development experience with Drupal and Tailwind CSS. image 9Next, let’s generate a Tailwind CSS config file using the following command:
npx tailwindcss init -pIn the terminal, run the following command:Now we need to create a CSS file to put the Tailwind directives in.npm install [email protected] --save-devimage 8Go to the terminal and type in the following command npm init. It prompts us with a series of questions regarding our project. For this tutorial, I am keeping everything default by pressing the enter key until our package.json file is added as shown in the image.then install Node Version Manager through commands
    
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
    
source ~/.bashrc
    
verify it by command : command -v nvm
    
Install the latest node.js version which is 14 through the command 
    
nvm install 14
nvm use 14
    
Next, we will generate the package.json file which we require to initialize a new node.js project. Through command
npm init
 image 12

Step 3: Adding Tailwind CSS to our Drupal Theme

We now run the following command:image 10image 11

Using Tailwind CSS In Our Drupal Theme

Create the src folder, create a file named index.css, and paste the following directives:Go to the tailwind.config.js file and set the path for Tailwind to scan. Since our Twig templates are in the templates directory, we will use that path as shown in the image.image13image 14image 15

Let’s Wrap It Up!

Go to the root directory and type in the following command in the terminal
./vendor/bin/drush gen themeWe can verify it by going to the dist folder as shown in the image.

Similar Posts