Install the free plugin and start using Tailwind CSS in WordPress, instantly.
⏰ Start using Tailwind CSS in WordPress in seconds, no setup required.
⚙️ Effortlessly configure Tailwind CSS right from WordPress.
⚡️ Build even faster with 50+ responsive,
copy & paste block patterns.
Current
Tailwind CSS version: 3.4.5
How It Works:
- Install free Draft plugin
- Configure Tailwind CSS right in the page, post, or site editor or from WP Admin > Settings > Draft settings
- Add Tailwind CSS utility classes to blocks
- Go Pro to improve site performance by purging unused CSS
Free plugin features:
- Configure Tailwind
- Add Custom CSS ( including ability to @apply Tailwind CSS utility classes )
- Add Tailwind CSS utility classes to Gutenberg blocks
- Add Tailwind CSS utility classes inline to text ( such as headings and paragraphs )
Pro plugin features:
- Purge Unused CSS ( make your WordPress site blazing fast )
Block-Editor Add-ons:
- Dark mode toggle block - add dark mode toggle blocks anywhere to toggle using the Tailwind CSS darkMode 'selector' strategy
- Group block link - add links to the Group block for creating linkable cards and layouts
- Archive title filter - add text before/after archive titles for better archive labeling
Go Pro
Free full-site-editing (FSE) block theme:
Learn more
Free ready-to-use copy & paste block patterns:
Explore patterns
Free ready-to-use copy & paste block templates:
Explore templates
Free Video Tutorials
Learn how to speed up your development by adding Tailwind CSS utility classes to Gutenberg blocks:
Tutorials
This section describes how to install the plugin and get it working.
e.g.
- Upload the
draft
plugin files to the /wp-content/plugins/
directory, or upload the draft.zip file through the WordPress plugins screen directly by clicking 'Add New' and selecting the zip file from your computer.
- Install and active the Gutenberg WordPress plugin.
- Activate the Draft plugin through the 'Plugins' screen in WordPress.
- Use the Draft plugin on your pages and posts.