Tailwind CSS is a versatile and flexible CSS framework designed to provide developers with a comprehensive set of utility classes to build custom web designs efficiently. It takes a different approach compared to traditional CSS frameworks by focusing on utility classes rather than pre-designed components. Highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override.
Step 1 – Include TailwindCSS in your WordPress theme:
Now we are ready to install tailwindcss in our WordPress theme! Head over to the tailwindcss installation page, we are going to be following the instructions found here.
Ensure that you have Node.js and npm (Node Package Manager) installed on your machine. You can download and install them from the official Node.js website: https://nodejs.org
Install Tailwind CSS and its dependencies by running the following command:
npm install tailwindcss
TailwindCSS is now installed on your theme! We just have to run a few configurations.
Step 2 – Configure your template paths:
Once the installation is complete, you need to generate the configuration file for Tailwind CSS. Run the following command:
npx tailwindcss init
This command creates a tailwind.config.js file in your project directory, which is used to customize and configure Tailwind CSS.
You will now see a new file in your theme’s directory called tailwind.config.js. We need to edit this file, this bit is important and where most people go wrong.
After customizing the configuration, you need to generate the CSS file that includes all the utility classes provided by Tailwind CSS. Add the following command to your project’s build process or run it manually.
Step 3 – Create the theme CSS file:
In here you will be able to include all of your components, fonts, etc. We will also initialize everything we need to make TailwindCSS work.
in this new folder create a file called style.css. In this new file paste the following and save the file:
@tailwind base;
@tailwind components;
@tailwind utilities;
After customizing the configuration, you need to generate the CSS file that includes all the utility classes provided by Tailwind CSS. Add the following command to your project’s build process or run it manually:
npx tailwindcss build -o style.css
This command compiles the Tailwind CSS utility classes into a single CSS file named style.css. You can change the filename and location as per your needs.
Now need to load style.css in our functions.php file. Open functions.php and enter the following:
/**
* Enqueue scripts and styles.
*/
wp_enqueue_style( 'your-theme-styles', get_template_directory_uri().'/css/style.css', array(), YOUR_THEME_VERSION );
You are now setup and ready to start using tailwindcss classes. At the moment nothing will have changed as we haven’t used any classes in our theme files.
Tailwind CSS is now installed and ready to use in your project. You can start applying the utility classes provided by Tailwind CSS to build your bespoke designs without any opinionated styles.
