Скачать или смотреть Install TailwindCSS in WordPress [2024 GUIDE]

Installing Tailwind in your WordPress theme can seem confusing, but it doesn't have to be. This guide makes setting up Tailwind CSS in WordPress simple. Bring the power of Tailwind to WordPress, and start building amazing WordPress themes with ease! This is the updated guide for 2024.

Links
Tailwind docs: https://tailwindcss.com/docs/installa...
Written instructions visit https://codingoblin.com/install-tailw....

How to install and setup Tailwindcss in your WordPress theme
In this post we are going to look at how to setup tailwindcss in your WordPress theme. This is an extremely easy process but for some reason there aren’t any decent setup guides for WordPress out there. Follow along in the video below, all the code required can be found below the video!

Step 1: Create a new theme (optional)
If you already have a theme setup, move on to step 2. If you don’t have your own theme already setup, follow these quick steps.

Download a starter theme
Head to underscores.me and download a starter theme. Once this you have downloaded the starter theme, install it on your local WordPress installation. Open the theme in your code editor and you are ready to get started.

Step 2: Install tailwindcss in our 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.

Don’t be scared of the terminal!
In the terminal, navigate to the root folder of your WordPress theme. Run the following commands:
npm install -D tailwindcss
npx tailwindcss init

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. We need to enter the paths to the files that will contain tailwind classes in our theme. This will depend on the structure of our theme, but the I will put 2 examples below to help you understand what you need to put.

If we just want to use tailwind classes in our header.php file, and this file is stored in the route of our theme, head over to https://codingoblin.com/install-tailw... to see the code that needs to go here.

In this example we would want to use wildcards to make sure that all the files are covered. The code can be found at https://codingoblin.com/install-tailw....

Create the CSS file
In the route folder of your theme, create a new folder called src, 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;

Build your CSS
Back in the terminal, run the following command:
npx tailwindcss -i ./src/input.css -o ./src/output.css --watch

This will create a new folder and file src/output.css.

Load the CSS in our theme
We now need to load output.css in our functions.php file. Open functions.php and enter the code found at: https://codingoblin.com/install-tailw...

Your theme will most likely already be using the 'wp_enqueue_scripts' hook, if this is the case, just add the line wp_enqueue_style( 'tailwind-css', get_template_directory_uri() . '/src/output.css', array() ); to the function that is executed with the 'wp_enqueue_scripts' hook.

You’re good to go
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. Go ahead and give an element a bg-red-500 class. Make sure npx tailwindcss -i ./src/input.css -o ./src/output.css --watch
is still running in the terminal.

My Hosting Provider - use code GOBLIN for a discount. Free trial with no card required:
https://platform.cloudways.com/signup...