Tailwind with WordPress is that possible?
If there is something in terms of CSS that is (and was) the best in 2020 (and actually even earlier), then it’s definitely Tailwind CSS. It is so-called a Rapidly build modern websites without ever leaving your HTML. and advertises with the following claim on the website:
Rapidly build modern websites without ever leaving your HTML.
Tailwind CSS with WordPress?
Tailwind CSS website.
And “without ever leaving your HTML” means exactly what it says there. The first example on the Tailwind CSS website shows this impressively: a huge pile of CSS classes is slapped on every HTML element that needs to be styled. If the hair on the back of your neck bristles at this thought, I feel the same way.
What is Tailwind CSS?
A utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup
But let’s take a sober look at Tailwind CSS. It’s a CSS framework, similar to Bootstrap or Foundation, which has been around for a long time. Tailwind CSS has been around since 2016 and version 2.0 was released in November 2020. However, it takes the utility-first approach, ie there are a large number of classes that all do individual things. If you combine these classes, a completely styled element is created.
Now you could think that with this idea of twelve thousand classes you would get a huge CSS file on the website that would drag the performance into the basement. However, this is actually only the case if the entire framework is integrated in such a way, which is not recommended. Instead, Tailwind CSS can be installed as a PostCSS plugin. Fittingly, there is also a purge function with which the framework can be reduced to only those classes that are used in the project.
Is Tailwind Really Worth It?
Tailwind is a CSS utility framework. It is created for utility purposes, meaning that it is supposed to make development easier. In short terms, the main benefit of Tailwind is that it relieves you from having to write loads of CSS, and you can instead use Tailwind directly in your HTML.
How can Tailwind CSS be used with WordPress?
Tailwind CSS can certainly be used well for your own components if you can assign the CSS classes yourself in a theme or plugin. It becomes a little more difficult with the standard elements, the templates of which are provided by WordPress itself. If you use PostCSS, you can make use of the @ apply directive: this allows you to use the classes from Tailwind CSS directly in your own CSS without throwing the previous structure overboard. I haven’t tried this yet, but that could be a good way to be able to use the framework for the standard WordPress elements as well, without writing any PHP functions that the classes clap to the elements.
Conclusion
To be honest, I rolled my eyes a bit when I saw the first example of Tailwind CSS’s utility-first approach. Why is it hip again to plaster the HTML with classes? Put the CSS you need in a class, it’s not that difficult.
However, I see advantages in two use cases: larger teams working on a product program in the same style and not each one as they see fit, as the framework provides a certain framework. The second case is prototyping because in a greenfield you can put together a design in HTML by simply combining many classes.
Tailwind Code Example
<input type="email" class="border-0 px-3 py-3 rounded text-sm shadow w-full bg-gray-300 placeholder-black text-gray-800 outline-none focus:bg-gray-400" required="">
<p class="text-3xl md:text-5xl my-4 leading-relaxed md:leading-snug">Leave us a feedback!</p>You can see in the above code we have rich classes, using tailwind classes we can design the UI. But you noticed there are many CSS-CLASSES that make our HTML busy! Don’t worry, using tailwind we can create components and call the component on where we need that. I have a short experience in tailwind because I have currently done a project using tailwind AND my experience was really awesome with a tailwind that’s why I published this article.
Below check the popularity of Tailwind CSS on Github. Tailwind CSS has 41.8k Stars on Github.
So, now we have it clear that it is easy to integrate Tailwind CSS in WordPress Themes and Plugins.
