CSS Frameworks: Tailwind
Arguments Against Tailwind CSS
Arguments Against any CSS Utility Framework CSS Utility Framework
I think I would agree on not liking utility CSS with this article on Why I Don’t Like Tailwind CSS, and even more persuasive article about not liking it is here: A Look at Tailwind CSS
There are a notable authors against using Tailwind with Wordpress
Advantages when Using Tailwind
You can enjoy some great benefits of Tailwind CSS:
- No need to name CSS classes
- Minimized switching between HTML and CSS
- Easily copy-paste and share components
- Responsiveness is already included - when you copy-paste a component, it’s all there, even the responsiveness
- Small CSS size when building for production, with unused styles automatically purged thanks to PurgeCSS
Integrating Tailwind as WP Plugin
You’ll be delighted to know that it’s quite simple to integrate Tailwind into WordPress manually. You can follow the beautifully explained process in this video tutorial: Tailwind CSS + WordPress Theme & Block Type Boilerplate, which also comes with its own boilerplate repository LearnWebCode/brads-boilerplate-wordpress. Please note, the solutions discussed in this video don’t consider the case of Tailwind being active within the editor.
We’ll take a closer look at various solutions for integrating Tailwind CSS into WordPress, which come packaged as plugins.
Plugin: TailPress by Greg Hunt
TailPress is a fantastic free option that handles a lot of the technicalities, but from a user’s perspective everything still needs to be entered in the “Additional CSS” field without the benefit of autocompletion. It operates similarly to the Winden plugin, but without the cost. Paired with the “Plain Classes” plugin, it could be a formidable combination.
Node.js isn’t required on the production server to generate the final CSS, it achieves this by calling its API at tailwind.restedapi.com for cache generation. However, it’s uncertain how long this API will remain functional, so it’s not exactly a selling point.
The issue remains that the block editor preview still isn’t working for you.
Plugin: Winden
Winden by dplugins.com is a top-notch plugin that seamlessly integrates Tailwind CSS into your WordPress theme development process. It’s compatible with popular page builders like Gutenberg FSE, Oxygen Builder, and Bricks Builder, just to name a few. Plus, you’ll enjoy the convenience of a lifetime $99 license for unlimited sites.
Upon testing, it appears that this plugin places a strong emphasis on ensuring a smooth Tailwind integration into WordPress.
You may be tempted to try downloading a nulled version from babiato, but be aware that the plugin utilizes a proprietary API, so the longevity of your test may be uncertain.
Finding quality documentation can be a challenge, but have no fear! Give the informational article a read, complete with a helpful walkthrough video. And if the official docs are not quite detailed enough for you, don’t hesitate to turn to searching the Facebook page for answers. Additionally, you may find the overview of an older Winden version in this article to be quite useful.
In case you ever need them, the plugin also offers some well-thought-out starter config files.
Author is aware of the competition so here is an official comparison with TailPress:
- TailPress uses a fixed version of Tailwind CSS that is embedded within the plugin
- It doesn’t support Tailwind CSS plugins (although this hasn’t been confirmed)
- TailPress generates a CSS file for each page (I don’t understand this argument).
Just like TailPress, you don’t need node.js on your production server to use Winden, and it also utilize its own API server at winden-worker-pool-2.dplugins.com, tracked at wakaloka/winden-worker.
Note: In terms of the product’s history, there was a product called Oxywind, but it was later renamed to Winden, as mentioned in this post.
Plugin: Plain Classes
Plain Classes Gutenberg by dplugins.com is a super-focused plugin that does exactly what I need. It only serves to help in entering classes in the editor, with included features like Tailwind classes autocompletion, integration with Winden, manually adding set of classes, etc. It’s a paid plugin, but lifetime unlimited sites for $30 is a fair deal.
There is useful introductory announcement on their Facebook page and explanatory video on YouTube. Searching the Facebook page for the term Plain Classes Gutenberg is another way to find interesting information. This is how I’ve found out that the plugin used to be called “Wakaloka”? You can also see how Wakaloka Plain Classes plugin used to work with Oxygen and how to create classes name collection from a file on the disk, in this article.
Plugin: WP Draft won’t Work
WP Draft is a combination of a free plugin and a complimentary theme, but it constantly reminds you that the premium version WP Draft, is available and preferred.
The free plugin is quite functional and has similar “auto-complete classes” feature found in the paid “Plain Classes Gutenberg” plugin. The main difference is that the interface is located within the editor, attached to the block, rather than in a sidebar on the right.
Unfortunately, I’ve been unable to get Tailwind to display in the editor. Also, constant advertising text even when editing is annoying, but that can be probably hushed a little with some CSS.
Tailwind & WordPress Quirks
Once you’ve successfully integrated Tailwind into WordPress, you’ll face some challenges related to the Gutenberg editor.
Styling Blocks: Use @apply to Target Existing Classes
@apply is just like old-regular CSS, but in a different syntax. Using it goes against the main idea of Tailwind, and here’s why:
- invent class names again; not us as WP has done it for us
- have to jump between HTML and CSS files
- changing is scary as every CSS change is global
If you must use @apply, use it only for tiny reusable things like buttons and such.
davidhellmann/tailwindcss-fluid-type: A plugin that makes the use of Fluid Type a breeze.
Vrlo interesantna ekstenzija Tailwind Eye Dropper jer aproksimira Tailwind boju u odnosu na onu na ekranu, dok za istu namenu služi i Hex to Tailwind Converter online tool.
FlowBite - Tailwind CSS Components Library - DEV Community
Tailwind CSS 11-color Palette Generator is a tool for generating custom color palettes for Tailwind CSS.
unlight/tailwind-components: Collection of components found on the internet
Tailwind Menu Component — Tailwind CSS Components
Tailwind.CSS Prefix Applicator
module.exports = { prefix: ‘_’, }
Tailwind CSS Components - Tailwind UI
Against utility-first CSS: What is Utility-First CSS?: HeydonWorks Tailwind marketing and misinformation engine