Redirecting to PayPal

Create Tailwind templates in minutes

An online editor for Tailwind CSS with a simple, intuitive drag & drop interface and 140+ ready-made UI components.

Try Demo

1 Choose UI components

Use ready-made UI components from the multipurpose library grouped into 20 most frequently used categories.

2 Customize Tailwind styles

We have 290 Tailwind CSS variables in thematically connected categories to allow you to work effectively.

3 Download source code

When you select the appropriate components and settings, you can download source files in order to start integrating it with back-end.

Tailwind Builder - Tailwind CSS editor for busy developers | Product Hunt Embed Tailwind Builder - Tailwind CSS editor for busy developers | Product Hunt Embed
Tailwind Builder

Designed for busy developers

Easy to use

We know how valuable developers' time is. This is why we worked hard on the development of a tool that would be easy to use and which you could make use of without the need for any training.

Components library

Build templates from library of Tailwind CSS components grouped into 20 most frequently used categories including navigations, headers and more. Choose the right components and focus on the details.

Online Tailwind compilation

Tailwind CSS provides a lot of configuration options. Our customizer panel displays these options in thematically connected categories and it will allow you to use them effectively.

Convenient pickers

All types of settings include an interface for a quicker implementation of values (color picker, Google Fonts autosuggest, shadow builder, etc.).

Live edit

When changing the settings in customizer panel, the Tailwind config is compiled in real time, and you can follow the changes live.

Shareable preview

You can share the prepared project with other team members to review, or you can use a link to check the project on mobile devices.

Exportable sources

Tailwind Builder is a tool for developers. Our goal is to speed up your work. You can download source files in order to e.g. start combining front-end with back-end.

Pure Tailwind CSS

We do not use any external dependencies apart from those used by Tailwind CSS 1.9.

Try Demo

140+ Tailwind CSS components*

* All Tailwind Builder users automatically get access to Bootstrap Shuffle, Bulma Builder, and Material-UI Builder for FREE, so in total, more than 600 components.

Not enough? 😿

This November we will release the second custom-made UI component library for Tailwind CSS.

It will be a free update for all our users. Previews ↓

Metis Shuffle theme preview
#1 Premium Bundle

Too often developers don't have time to implement their designs perfectly.

That's why we have built an editor that will help you move faster from building a layout to the refining stage so that you can have time to work on the details.

Bootstrap Shuffle logo Bootstrap Shuffle - Bootstrap builder for busy developers | Product Hunt Embed
Tailwind Builder logo Tailwind Builder - Tailwind CSS editor for busy developers | Product Hunt Embed
Bulma Builder logo Bulma Builder - First such advanced theme builder for Bulma CSS framework | Product Hunt Embed
Material-UI Builder logo Material-UI Builder - React editor for busy developers | Product Hunt
Get the whole bundle 👇

The easiest way to create beautiful Tailwind templates


The selected plan includes lifetime access to Bootstrap Shuffle, Bulma Builder, and Material-UI Builder.

Buy a Lifetime License

Pay with card Pay with card
Pay with PayPal Pay with PayPal™
Save unlimited projects for later.
140+ ready-made UI components.
Works with Tailwind CSS 1.9.
Free updates with new UI kits and styles.
Access to Bootstrap Shuffle, Bulma Builder, and Material-UI Builder without additional costs (worth $297).

What's new?

* We link to relevant posts from the Bootstrap Shuffle blog.

Material-UI Builder
October 19, 2020
Material-UI Builder, our new editor for React, is live on Product Hunt!
Using keyboard shortcuts
July 1, 2020
Using keyboard shortcuts.
USING EXTERNAL UI LIBRARY
TailwindUI logo

TailwindUI integration is out in beta!

July 14, 2020

We are excited to announce that today we released an update that allow you to import multiple HTML snippets at once! 😍

In the first version, we focus exclusively on the seamless import of TailwindUI components. Soon we will allow importing code from any source.

This feature is available to all registered customers. Sign in →

Product Roadmap 2020

October

Launch of the Material-UI Builder . The first React JS editor created by the Shuffle.dev team. It's a free update for all Tailwind Builder users with two themes to start with!

November

  • Bootstrap 5-alpha support in the Bootstrap Shuffle .
  • Release of the Metis Shuffle, our second custom-made UI component library for Tailwind Builder (previews below).
  • Port of the Metis Shuffle for Bootstrap 5 (Bootstrap Shuffle ).
  • Port of the Metis Shuffle for Bulma CSS (Bulma Builder ).
Metis Shuffle theme preview

December

Our next big step this year is merging editors into one product: Shuffle.dev. We will do it on December 1st.

We believe that we can deliver more value by developing one powerful visual editor.

You can use our editors as usual before the date. We will migrate all accounts and projects!

Shuffle.dev positioning

Our goals:

  • Faster development of new features (including Vue and Angular export).
  • One place for documentation, tutorials, and videos.
  • Strong community around the Shuffle.dev brand so that we can collect and process feedback faster.

Q1 2021

Visual Editor v2.

A marketplace for creators to share their templates and design systems.

Figma-style team work.

Try Demo