ska-dev

<p><strong>ska-blocks</strong> plugin provides a seamless <strong>Tailwind CSS integration</strong> with the WordPress Block Editor.<br />
Manage Tailwind classes on blocks with an intuitive UI, making it possible to <strong>implement any Tailwind-based website design</strong> directly in the Block Editor with <strong>no build step</strong>, template files or third party page builders. The plugin comes with low level blocks that can represent any HTML element, which makes it possible to convert custom HTML to blocks and makes the Gutenberg editor incredibly flexible.</p>
<p><a href="https://wordpress.org/plugins/ska-blocks/?preview=1" rel="ugc">Live demo on WordPress playground</a><br />
<a href="https://ska-blocks.com/?utm_source=wordpress.org" rel="nofollow ugc">Website</a><br />
<a href="https://ska-blocks.com/docs/?utm_source=wordpress.org" rel="nofollow ugc">Read the docs</a></p>
<h4>Features</h4>
<ul>
<li><strong>Enter any Tailwind class</strong> – the plugin compiles the CSS for it and enqueues it in the block editor and front end.</li>
<li><strong>No bloat</strong> – any classes you don’t use on the page don’t get loaded, only Tailwind theme and properties are loaded globally, optionally Tailwind’s preflight can be included as well.</li>
<li><strong>Responsive</strong> – easily target any breakpoint in the block editor.</li>
<li><strong>Flexible</strong> – full control to utilize all HTML elements with any HTML attributes and styles – tailor custom solutions with no need for page builder bloat.</li>
<li><strong>Convert HTML to blocks</strong> – have an existing TailwindCSS-based design? Convert it to blocks automatically, use UI to fine-tune it and have less-technical users easily modify text content in a simple WYSIWYG environment.</li>
<li><strong>Presets & Variations</strong> – create reusable sets of classes, or blocks.</li>
<li><strong>AI integration</strong> – generate Tailwind HTML using AI and convert it to blocks on the spot.</li>
</ul>
<h4>Blocks</h4>
<ul>
<li><strong>Text</strong> – any HTML element that contains rich text.</li>
<li><strong>Element</strong> – any HTML element that contains other elements.</li>
<li><strong>Tailwind</strong> – convert Tailwind HTML to blocks – find HTML from the web or generate with AI.</li>
<li><strong>Image</strong> – render an image, placeholder, SVG, featured image, Lottie.</li>
<li><strong>Gallery</strong> – render multiple images with simple markup.</li>
</ul>
<h3>External services</h3>
<p>When using AI this plugin connects to an API endpoint to communicate with various AI models. No external connection is made until you enter your own API key and specifically interact with the AI feature of the “Tailwind” block. Request is made when you press “Generate” and include your written prompt and the contents of the Tailwind block.<br />
This service is provided by “OpenRouter”: <a href="https://openrouter.ai/terms" rel="nofollow ugc">terms of use</a>, <a href="https://openrouter.ai/privacy" rel="nofollow ugc">privacy policy</a>.</p>


ska-blocks – TailwindCSS for Block Editor

Advanced UI for managing Tailwind classes on WordPress blocks, generate Tailwind HTML with AI, convert HTML to blocks.

Nafis Mahmud Ayon

<p>Aspect Blocks is a powerful WordPress plugin for the Gutenberg editor, designed to make content creation and styling effortless. Built with Tailwind CSS, it offers highly customizable and responsive blocks to enhance your site’s design and functionality.</p>
<h3>Development and Source Code</h3>
<p>The source code for this plugin can be found on GitHub: <a href="https://github.com/NafisMahmudAyon/aspect-blocks" rel="nofollow ugc">GitHub Repository</a></p>
<p>✏️ Current blocks include:</p>
<ul>
<li><strong>Text Block</strong>: Add and style text with ease.</li>
<li><strong>Container Block</strong>: Create flexible layouts with customizable containers.</li>
<li><strong>Post Title Block</strong>: Display the title of a post dynamically.</li>
<li><strong>Accordion Block</strong>: Add collapsible sections to organize content efficiently.</li>
</ul>
<p>With Aspect Blocks, you can streamline your content creation process while ensuring a visually appealing and responsive design.</p>
<p>=🔧 <strong>Installation</strong></p>
<p>This section describes how to install the plugin and get it working.</p>
<ol>
<li>Upload the plugin files to the <code>/wp-content/plugins/aspect-blocks</code> directory, or install the plugin through the WordPress plugins screen directly.</li>
<li>Activate the plugin through the ‘Plugins’ screen in WordPress.</li>
</ol>
<p>=📖 <strong>Frequently Asked Questions</strong></p>
<h4>What is Aspect Blocks?</h4>
<p>Aspect Blocks is a Gutenberg plugin that provides a set of customizable blocks styled with Tailwind CSS for creating modern and responsive designs in WordPress.</p>
<h4>Do I need to know Tailwind CSS to use this plugin?</h4>
<p>No, you don’t need to know Tailwind CSS. However, if you are familiar with it, you can take full advantage of its utility classes for advanced customizations.</p>
<h4>Are the blocks mobile responsive?</h4>
<p>Yes, all blocks are designed to be fully responsive, ensuring a seamless experience across devices.</p>
<h3>Arbitrary section</h3>
<p>Aspect Blocks is perfect for developers and non-developers alike, offering simplicity with extensive customization options. Whether you’re building a blog, portfolio, or business website, these blocks can help you create a stunning, responsive design quickly and easily.</p>


Aspect Blocks

🌐 Aspect Blocks is a Gutenberg plugin that leverages Tailwind CSS for seamless style customization, providing a modern and responsive design. 🌟

ska-blocks – TailwindCSS for Block Editor vs Aspect Blocks