Tailwind Devtools Inspector: How to quickly edit tailwind classes and apply tailwind templates

Tailwind Devtools Inspector: How to quickly edit tailwind classes and apply tailwind templates

Tailwind is a great technology, but it can be difficult to approach it for the first time:

Moreover, if you used to work with Bootstrap in the past, there are plenty of classes that let you style whole components at once.

Tailwind Devtools Inspector is a Chrome extension that lets you solve these two problems and more.

Quick Install

Add to chrome:

https://chrome.google.com/webstore/detail/tailwind-devtools-inspect/ihkokciokaeljncgdpafbgafdpbocdab

News

Update 2021-02-23
Update 2021-02-06
Update 2021-02-05

Problem #1: edit Tailwind classes in Chrome devtools

Chrome does a great job at editing styles and elements and seeing changes live in your browser. Unfortunately, when using Tailwind, you have classes with fixed colors and sizes and it’s difficult to edit them from the Style Element Panel. The style panel is designed to edit CSS rules rather than “class rules”:

Infinite color values vs Tailwind discrete values

We need a tool to work with discrete values.

Problem #2: remember all classes to obtain a specific CSS component

If you worked with Bootstrap before, it can be annoying to remember and apply all Tailwind classes to style a component.

For example, to create an alert box using Bootstrap you need two classes:

An alert CSS styled component: Bootstrap VS Tailwind
<div class="alert alert-warning" role="alert">
  This is a warning alert—check it out!
</div>

In Tailwind you have to remember all these classes to achieve the same effect:

<div class="p:alert-warning relative px-5 py-3 mb-4 rounded border border-transparent text-yellow-800 bg-yellow-200 border-yellow-300" role="alert">
  This is a warning alert—check it out!
</div>

Not easy if you’re are just starting with Tailwind.

But I assure you: experienced Tailwind users will search for the presets to create that damn alert box too.

The Tailwind Devtools Inspector

So here we are: a Chrome extension that lets you solve the two problems above and more.

It’s open-source (GitHub), it’s free and it’s very lightweight: just the essential bits needed to let you work faster with Tailwind.

Let’s see what you can do with it.

Inspect from a button or with the t key

You have two possibilities to enable the inspector:

  1. Click on the extension button: it works as the Chrome Inspector (you may have to pin it from the Chrome Extensions button)
  2. Press the t button on your keyboard (it doesn’t work on inputs 🙂 )
Enable Tailwind Devtools Inspector in action
Enable Tailwind Devtools Inspector in action

Edit and live preview active classes: the Autocomplete feature

By using the Tailwind Devtools Inspector you can edit the tailwind classes and preview them live on your page. You will see all changes instantly applied to the inspected element. Moreover, the autocomplete suggester will help you find the right class without errors.

Using the Tailwind Devtools Inspector
Using the Tailwind Devtools Inspector with Up/Down keys

To switch between classes you can go UP and DOWN with your keyboard.

Presets: tailwind templates ready to apply

We already said how difficult it can be to apply more classes at once, especially if you come from Bootstrap.

With the Tailwind Devtools Inpsector you can easily apply more classes at once by using what we call presets: a preset is a special class that will style the current element with multiple classes.

Presets: Tailwind class templates
Presets: Tailwind class templates

To enable a preset type p: followed by alert-warning, or button-primary, or h1 and you’ll instantly apply all the Tailwind related classes. You can always edit the preset at any time and experiment with different presets using Up/Down on your keyboard as before.

More presets are coming (subscribe below to be updated).

Copy classes back to your code editor

As expected, when you finish to preview your element you can copy all classes and paste them back to your editor by using the COPY button:

Copy classes and paste them back to the editor
Copy classes and paste them back to the editor

Install Tailwind Devtools

Just go to the Chrome Web Store and add it to your extension:

https://chrome.google.com/webstore/detail/tailwind-devtools-inspect/ihkokciokaeljncgdpafbgafdpbocdab

What’s next

We are going to make the tool more robust (it’s still in BETA, but already used for production projects).

Move to parent/children ✓ Added on 2021-02 version

Show a breadcrumb to quickly move to parent/children elements:

More presets and nested presets

We are going to add more presets (please suggest yours). Moreover, we are going to add smart presets, i.e. presets that could apply classes to inner elements when a matching structure is found. If the HTML structure is not found, it would be possible to optionally add it and copy it back to your code.

Save your own presets

While many will be ok with Bootstrap like presets, you may want to save your own presets for components or part of them. We are going to add the possibility to save a group of classes as preset.

Responsive previews

We are designing a way to preview the responsive version of the inspected component right into the tool: imagine a sort of PiP.

Force embed full Tailwind on the page

Many times the developer just wants to try out Tailwind in a page, however it is not yet included. This feature will let you embed Tailwind into the page with a button click.

Integration with ReDevtools

Soon, Tailwind Devtools Inspector will be part of the ReDevtools project: a set of open tools to speed up the front-end development.

Subscribe to be notified about these updates (see below).

Contribute

Tailwind Devtools is still in BETA. You can contribute to the project in several ways:


Like this plugin? Share with the community:

Tweet Reddit