Pattern CSS – The CSS Editor For Blocks vs WindPress – Tailwind CSS integration for WordPress

The missing inline block CSS editor for the Gutenberg editor. Very powerful with synced patterns as well. And it pairs well with global styles. This plugin is perfect for users looking to add CSS for blocks without needing to create a child theme, or use a bloated plugin. Client safe too. CSS won’t leak outside of the block, and only valid block CSS is persisted. Star it on GitHub Follow me on Twitter @kevinbatdorf How to Every block will have a new “Pattern CSS” settings panel Open it and add any CSS. It will be scoped to the block To target the block directly, you must use the [block] selector To target any element inside the block, use the normal CSS selector Use !important to override your theme styles (use sparingly) Global Editor Access global styles under the options menu (three dots) in the top right corner of the editor Additionaly, you can open from the Pattern CSS block editor controls Features Powered by WebAssembly for fast and secure CSS parsing Smart loading. Only loads the CSS when the block is present Styles persist when changing themes Scopes styles to the block so that parent/sibling blocks are not affected It’s fast CSS is minified and optimized It’s safe. Invalid, non-spec CSS is never persisted Supports reusable (synced or not-synced) patterns See changes on the page as you make them Combines adjacent rules (to decrease size) Minifies colors and math functions to simplify according to spec Supports CSS nesting Basic Example /* Target the block directly */ [block] { background: antiquewhite; padding: 2rem; } /* Target any inner elements */ a { text-decoration-color: burlywood; text-decoration-thickness: 2px; text-decoration-style: solid !important; } a:hover { text-decoration-color: darkgoldenrod; } /* Output: */ .pcss-a1b7b016{background:#faebd7;padding:2rem}.pcss-a1b7b016 a{text-decoration-color:#deb887;text-decoration-thickness:2px;text-decoration-style:solid!important}.pcss-a1b7b016 a:hover{text-decoration-color:#b8860b} Supports Media Queries @media (prefers-color-scheme: dark) { [block] { border-color: blue; } } /* Output: */ @media (prefers-color-scheme:dark){.pcss-cddaa023{border-color:#00f}} Combines Rules [block] { color: red; } .bar { color: red; } /* Output: */ .pcss-3aa0f0fc,.pcss-3aa0f0fc .bar{color:red} Fixes redundant properties [block] { padding-top: 5px; padding-left: 50px; padding-bottom: 15px; padding-right: 5px; } /* Output: */ .pcss-3aa0f0fc{padding:5px 5px 15px 50px} Supports CSS nesting [block] { padding: 1rem; a { color: red; } background: white; /* Including media queries */ @media (prefers-color-scheme: dark) { background: black; color:white; } } /* Output: */ .pcss-f526bb2d{background:#fff;padding:1rem;& a{color:red}@media (prefers-color-scheme:dark){&{color:#fff;background:#000}}} Check browser support for CSS nesting

WindPress: the only Tailwind CSS v3 and v4 integration plugin for WordPress. WindPress is a platform agnostic Tailwind CSS integration plugin for WordPress that allows you to use the full power of Tailwind CSS within the WordPress ecosystem. Tailwind CSS version: – 3.4.19 – 4.3.3 Features WindPress is packed full of features designed to streamline your workflow. Some of our favorites are: Dual Tailwind CSS version: Tailwind CSS 3.x and 4.x ready. Plug and play: Start using Tailwind CSS in WordPress in seconds — no setup is required. Customizable Configuration: The plugin comes with a default Tailwind CSS configuration, but you can easily customize it to fit your needs. Easy to use: Simplified and intuitive settings to get you up and running quickly. Lightweight: The plugin dashboard built on top of WordPress REST API, and a modern JavaScript framework for an instant, responsive user experience. Yet it has a small footprint and won’t slow down your site. Blazingly fast: Cache makes your WordPress site blazing fast. Generate the final optimized CSS file in the browser without server-side tools. None of your data is transferred over the network. And some specific integrations also include the following features: Autocompletion: As you type, Tailwind CSS class names will be suggested automatically. Variable Picker: Easily select Tailwind CSS themes’ colors, fonts, and other variables from a panel. HTML to native elements: Convert Tailwind CSS HTML to native elements in the editor. Sort the classes: Sort the Tailwind CSS classes on the input field. Hover Preview the classes: Hover over the classes to see the complete outputted CSS and the preview of the design canvas. Ubiquitous Panel: A floating panel that allows you to quickly access the WindPress settings from anywhere on the page. Visit our website for more information. Seamless Integration It’s easy to build design with Tailwind CSS thanks to the seamless integration with the most popular visual/page builders: Gutenberg / Block Editor GreenShift Kadence WP LiveCanvas Timber Blockstudio — Pro Breakdance — Pro Bricks — Pro Builderius — Pro Etch — Pro Meta Box Views — Pro Oxygen 6 / Classic — Pro WPCodeBox 2 — Pro Planned / In Progress Elementor Divi Pinegrow Zion Builder Note: The core feature will remain available on all versions, but some integrations may be added or removed from the free version in the future. Bring Your Own Integration WindPress is designed to be easily extensible, so you can build your integrations with Tailwind CSS. The plugin provides a simple API for adding integrations. Check out our detailed guide to get started. Love WindPress? Give a 5-star review Purchase the Pro version Join our Facebook Group Sponsor us on GitHub or Ko-fi Credits Image by Pixel perfect on Flaticon Affiliate Disclosure: This readme.txt may contain affiliate links. If you decide to make a purchase through these links, we may earn a commission at no extra cost to you.