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

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

Tailwind as WP Plugin

Ovo je ustvari predivno objašnjeno kako možeš lepo i normalno ručno da integrišeš Tailwind u Worpdress i da ti ustvari ništa posebno ne treba: Tailwind CSS + WordPress Theme & Block Type Boilerplate, a uz taj video je i pripadajući boilerplate repo LearnWebCode/brads-boilerplate-wordpress.

Razna rešenja za Tailwind CSS integraciju u WordPress, u obliku pluginova.

Plugin: TailPress

A quick note about TailPress: you don’t need Node.js on your production server.

TailPress is a great free option that does a lot of the background work, but from a user perspective everything is still entered in the “Additional CSS” field, with no auto-completion. It’s similar to the Winden plugin in this regard, but free.

Combining it with “Plain Classes” plugin could be solid solution.

Problem: Tailwind CSS Preview inside Block Editor doesn’t work for me.

Plugin: Winden

It’s worth noting that with Winden and TailPress, there’s no need to install Node.js on your production server

Winden by dplugins.com is plugin with seamless Tailwind CSS integration for WordPress Theme Development directly on server, compatibile with Gutenberg FSE, Oxygen Builder, Bricks Builder, etc. It’s not expensive as there is a lifetime $99 licence for unlimited sites.

After testing, I believe that the plugin focuses only on the engine, or the mechanism of properly integrating Tailwind into WordPress.

I’ll download it nulled to test, from babiato.

Note: There was Oxywind product in the past, but that is renamed to Winden. Source: Winden is rebranded Oxywind

To discover more, read informational article including walkthrough video.

Offical docs are lacking details, but more info can be found by searching Facebookp page. Overview of older Winden version by independent author is usefuly also

Here are also some sane Starter Config files, if needed.

Author is aware of competition and here is official comparison with TailPress:

• TailPress uses a fixed Tailwind CSS version embedded in the plugin
• doesn’t support Tailwind CSS plugins
• TailPress produces a CSS file for each page? I don’t understand this argument

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.

If the documentation isn’t enough, you can find useful information in their 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 that Wakaloka Plain Classes plugin works with Oxygen and how to create classes name collection from a file on the disk, at this documentation article.

Plugin: Twentig

Twentig is a really free plugin toolkit that enhances block themes. Use the official Twentig site for documentation on how to use Twentig. To make the most of it, using the “Twenty Twenty-Three” theme is suggested, or any other proper block theme.

The most important features you get with Twentig are:

• Enhances some core blocks with some awesome features
• Adds “responsive visibility” options to all core blocks
• There’s a beautiful “Stretch link” option to make the block entirely clickable if it contains a link somewhere inside. Currently it works only on core/cover, core/media-text and core/column. This article explains it better.
• Enhances core/navigation block with responsive breakpoint and some other features
• Beautiful UI of the idea for “Predefined CSS Classes”. Take a look at how to add CSS classes. Sad that it’s a fixed list of styles that can’t be modified.
• Adds the possibility to host Google Fonts locally
• Comes with a huge library of pre-designed block patterns and page templates, nicely grouped by categories, made just out of core blocks

Plugin: WP Draft

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.

Constant advertising text even when editing is annoying, but that can be probably hidden using 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.

Windi CSS

Windi CSS is obviosly an important innovation that triggered Tailwind CSS to introduce JIT.

There are more info here and controversy on Windi CSS and Tailwind JIT, and the buzz is present also inside WordPress ecosystem