For the past few years, the way of coding has been completely revolutionized. The introduction of new technologies and advancements in the existing ones have come far from what they were a decade ago.
One of the areas where we have seen significant changes is front-end development aka client-side development. The use of technologies like Bootstrap and Semantic UI has made our workflow much easier and faster.
One framework that has been used the most since its introduction is Tailwind CSS. But have you ever used it in the WordPress environment? Have you thought about using it? If you answer is no, don’t worry—in this article, we explain everything you need to know about addin Tailwind CSS in WordPress. From using it in a fresh new theme to an existing theme, we will understand both in detail.
Why Use Tailwind CSS with WordPress?
Before jumping into the topic let me clarify what Tailwind CSS is and how it works with HTML. It uses pre-existing utility classes that add CSS functionality to the HTML in a much simpler and cleaner way.
Think this way if you have to set the text size to a small size then you have to write something like this in the CSS file.
|
1 2 3 |
Font-size:15px; |
In Tailwind, you only have to add a class name .text-sm. This will set the font size too small. Another important factor is that you don’t have to shuffle between two files to write the code. You can prepare the markup and its UI in HTML. Isn’t that cool? Let’s see how we can do this in WordPress.
1. Utility-First Framework
Tailwind CSS is unique because of its utility-first approach, it allows you to apply styles directly in your HTML templates. Instead of writing custom CSS for each element, you can use predefined classes like bg-blue-500 or text-center to achieve the desired effect quickly. This makes creating the UI so much fast and fun.
3. Easy Customization and Extensibility
Tailwind CSS comes with an easy-to-configure tailwind.config.js file that allows you to extend default themes, add custom colors, and modify spacing options.
2. Responsive Design Made Simple
Tailwind comes with built-in classes for responsive design. For instance classes like md:flex, lg:text-lg make design super fast and simple. This prevents you from writing those various lines of code. It comes in handy if you create layouts that need to be completed in less time.
Prerequisites for Adding Tailwind CSS to WordPress
Now you know the essentials about Tailwind it is time to understand what are the Prerequisites to run Tailwind in your WordPress environment.
Ensure the availability of the following
Step 1: Install Node.js and npm
As you know npm and Node.js are essential to run Tailwind. So before getting started check if they are installed correctly/already.
You can check by running the following commands.
|
1 2 3 4 5 |
node -v npm -v ``` |
If they aren’t installed, download and install them from node.js.
Step 2: Navigate to Your WordPress Theme Directory
Open your terminal or command prompt and navigate to your WordPress theme directory:
|
1 2 3 4 |
cd wp-content/themes/your-theme-name ``` |
Step 3: Initialize npm in Your Theme Directory
Run the following command to create a package.json file, which helps manage your project’s dependencies:
|
1 2 3 4 |
npm init -y ``` |
Step 4: Install Tailwind CSS
Install Tailwind CSS as a development dependency:
|
1 2 3 4 |
npm install -D tailwindcss ``` |
Step 5: Create the Tailwind Configuration File
Generate a tailwind.config.js file using the following command:
|
1 2 3 4 |
npx tailwindcss init ``` |
This file allows you to customize Tailwind’s default settings and configure which files Tailwind scans for class usage.
Step 6: Configure Tailwind to Scan Your Template Files
In your tailwind.config.js, set up the
content property to include the paths to your theme’s PHP and JavaScript files:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
```js module.exports = { content: [ './*.php', './**/*.php', './assets/**/*.js', // Your js file location. ], theme: { extend: {}, }, plugins: [], }; ``` |
This step ensures that Tailwind will only generate the CSS for the classes you use, keeping your stylesheet size optimized.
How Tailwind and WordPress Can Work Together
In order for Tailwind to work well without significant customization, it needs to act as the primary CSS for a given page; this eliminates a number of use cases within WordPress.
You can use Tailwind in WordPress plugins and themes with some planning and setup. For this article, we will use in WordPress theme.
1. Tailwind Integration in a Simple WordPress Theme
So let’s start with the required files index.php and style.css. Our index.php should look something like this –
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<!doctype html> <html lang="en"> <head> <?php wp_head(); ?> <link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>" type="text/css" media="all" /> </head> <body> <?php if ( have_posts() ) { while ( have_posts() ) { the_post(); the_title( '<h1 class="entry-title">', '</h1>' ); ?> <div class="entry-content"> <?php the_content(); ?> </div> <?php } } ?> </body> </html> |
This is a simple index template to make you understand the use of Tailwind. If you want you can add a lot of things in the template like thumbnails but for the sake of this article, we will be showing the title and content only. Also, we are using CSS as a regular CSS file for now you can also enqueue it if you want. Learn how to easily add CSS in WordPress using wp_enqueue_style.
Required files for tailwind
On the Tailwind side, we need three files:
|
1 2 3 4 5 |
package.json tailwind.config.js An input file for Tailwind |
Since there is no package.json file yet, we’ll create an empty JSON file in the same folder with index.php by running this command in our terminal of choice:
Now you have to create package.json, you need to create this in the same directory as index.php.
Run the following command –
|
1 2 3 |
echo {} > ./package.json |
Now install tailwind using the following command –
|
1 2 3 |
npm install tailwindcss --save-dev |
Now, let’s generate tha tailwind configuration file tailwind.config.js and configure it to search for utility classes in all our PHP files –
|
1 2 3 4 5 6 7 8 9 |
module.exports = { content: ["./**/*.php"], theme: { extend: {}, }, plugins: [], } |
Now create a tailwind CSS file by adding the following lines to it.
We can name our input file anything we want. Let’s create a file called tailwind.css and add this to it –
|
1 2 3 4 5 6 7 8 |
/*! Theme Name: Tailwind Integration*/ @tailwind base; @tailwind components; @tailwind utilities; |
The three @tailwind directives add each of Tailwind’s layers.
|
1 2 3 |
npx tailwindcss -i ./tailwind.css -o ./style.css --watch |
The above command tells the Tailwind CLI to create a CSS file for the Tailwind CSS we have created. The watch flag looks for changes made in our project.
This was all about adding tailwind CSS to a simple custom WordPress theme. However, the process is a bit different in real-world scenarios. So, it’s time to understand how we can do the same in a production or live-ready theme.
2. Adding Tailwind CSS in an Existing WordPress theme
For example, we will work in the twenty-twenty-one WordPress theme which is a block theme by WordPress.
Before beginning the process install the theme from the directory itself or upload it. After that navigate to the theme directory.
The twenty twenty-one theme already has the package.son file. So you can directly install the Tailwind here.
|
1 2 3 |
npm install tailwindcss --save-dev |
Add tailwind.config.json file
|
1 2 3 |
npx tailwindcss init |
Now you have to update your tailwind.config.jsom file to look the same as you have seen in the minimal theme setup. Copy the stylesheet that you have in the theme to the tailwind.css file.
From here onwards we need to add the three tailwind files files.
|
1 2 3 4 5 6 7 8 9 |
/*! Theme Name: WordPress + Tailwind */ @tailwind base; @tailwind components; @tailwind utilities; |
Also, do not forget to add the top comment that is needed by WordPress to understand the template file. Now WordPress will be able to understand your theme and reset the CSS.
Now is the time to run the command so that we can set the input and output. As mentioned earlier watch looks for any changes that are made and updates that.
Now you check your theme for the changes that have been made. Pretty much it, now we are almost near the complete setup.
At this moment you can copy and use the element from the Tailwind UI library. But before doing this you need to make a few changes in the tailwind.config.js file. There can be higher specificity classes that can prevent this from working.
|
1 2 3 4 5 6 7 8 9 10 |
module.exports = { important: true, content: ["./**/*.php"], theme: { extend: {}, }, plugins: [], } |
This will make sure the utility classes added have a higher specificity than the existing CSS file as we have added !important.
Final Words
Integration of Tailwind can take your WordPress development workflow to new possibilities. You will be able to build things much faster. Additionally, it will be a lot easier to maintain files and make updates later. This was all about adding Tailwind CSS in the WordPress custom theme and the existing one. With these practical and easy-to-understand tips you will able to add tailwind in your WordPress environment.
