USING TAILWIND CSS IN WORDPRESS

Bootstrap has been dominating its use in WordPress sites. However tailwind provides more customizable (can use custom classes all through) and modern approach in responsive design. This approach allows developers to build with more flexibility and fast, as you can build unique designs without having to write custom CSS.

However the choice between Tailwind and Bootstrap depends on your specific needs and preferences. Both frameworks have their strengths and weaknesses, so it’s worth evaluating both to determine which is the best fit for your project. 😁[The choice is yours]

How to Include TAILWIND CSS to any WordPress Project

1. Navigate to your theme folder i.e wp-content/themes/{your-theme}
2. Install node to your PC if it does not exist, visit Node Official
3. If you have node, on terminal run, npm init this generates a package.json file , or run echo {} > ./package.json on the terminal still to generate the package.json file
4. Run npm install tailwindcss — save-dev on terminal
5. To generate Tailwind config file, run npx tailwindcss init
6. A file tailwind.config.js is added to your base directory. On the content array set it to content: [“./**/*.php”], this tells Tailwind to search for utility classes in our PHP files also as part of exports add important: true, before the content array as a new property. This is used to override existing classes with a higher specificity.
7. create tailwind.css file
8. Cut all content in style.css file i.e., Theme description including Theme Name etc.. and paste it in tailwind.css file
9. Add tailwind @tailwind directives to tailwind.css including @tailwind base; @tailwind components; @tailwind utilities; , on different lines
10. That’s it 😉, to check if it is correctly running use the command npx tailwindcss -i ./tailwind.css -o ./style.css — watch , on terminal
11. For full experience add in the head section of the header.php,

<link href=”https://cdnjs.cloudflare.com/ajax/libs/flowbite/1.6.4/flowbite.min.css" rel=”stylesheet” />

Get Daniel Kitheka’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

This tells the Tailwind CLI to generate our style.css file using tailwind.css as the input file. The --watch flag will continuously rebuild the style.css file as utility classes are added or removed from any PHP file in our project repository.

Using Tailwind Classes

If you are a complete beginner and want to test if tailwind is working copy responsive header code from here. Paste the code to your header.php file of the them. don’t forget to get_header() in the index.php file

INCLUDING TAILWIND JS

USING CDN

Tailwind JS is responsible for handling different events and allowing the site to be more interactive

To add Tailwind JS add the link below to the footer.php of your theme, <script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/1.6.4/flowbite.min.js"></script>

Follow for more stories