內容簡介
總結：
透過使用 Tailwind 類別及低階區塊，在區塊編輯器中實現任何設計。只要輸入 Tailwind 類別，外掛就會編譯其 CSS 並加載到區塊編輯器和前端，避免浪費。可將 Tailwind 主題和屬性全域加載，還可以選擇性包含 Tailwind 的預置樣式。
問題與答案：
1. 如何在區塊編輯器中實現任何設計？
- 透過使用 Tailwind 類別和低階區塊。
2. 何時會將 CSS 編譯並載入到區塊編輯器和前端？
- 當輸入 Tailwind 類別時。
3. 如何避免載入未使用的類別？
- 只有使用在頁面上的類別會載入，全域僅加載 Tailwind 主題和屬性。
4. 如何將 Tailwind HTML 轉換為區塊？
- 使用「Tailwind」區塊，可以從網路找到 HTML 或使用人工智慧產生。
5. 該外掛有哪些不同種類的區塊？
- 包括 Text、Element、Image、Gallery 等區塊。
6. 如何使用 AI 連接到外部服務？
- 這個外掛在使用 AI 時會連接到 API 端點，需輸入 API 金鑰並選擇與「Tailwind」區塊的 AI 功能互動。當按下「生成」時，會發送請求並包括您的文字提示和「Tailwind」區塊的內容。
7. 由誰提供這項服務？
- 由「OpenRouter」提供，並提供使用條款和隱私政策。
外掛標籤
開發者團隊
② 後台搜尋「ska-blocks – TailwindCSS for Block Editor」→ 直接安裝（推薦）
原文外掛簡介
ska-blocks plugin provides a seamless Tailwind CSS integration with the WordPress Block Editor.
Manage Tailwind classes on blocks with an intuitive UI, making it possible to implement any Tailwind-based website design directly in the Block Editor with no build step, 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.
Live demo on WordPress playground
Website
Read the docs
Features
Enter any Tailwind class – the plugin compiles the CSS for it and enqueues it in the block editor and front end.
No bloat – 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.
Responsive – easily target any breakpoint in the block editor.
Flexible – full control to utilize all HTML elements with any HTML attributes and styles – tailor custom solutions with no need for page builder bloat.
Convert HTML to blocks – 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.
Presets & Variations – create reusable sets of classes, or blocks.
AI integration – generate Tailwind HTML using AI and convert it to blocks on the spot.
Blocks
Text – any HTML element that contains rich text.
Element – any HTML element that contains other elements.
Tailwind – convert Tailwind HTML to blocks – find HTML from the web or generate with AI.
Image – render an image, placeholder, SVG, featured image, Lottie.
Gallery – render multiple images with simple markup.
External services
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.
This service is provided by “OpenRouter”: terms of use, privacy policy.
