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.
Add to chrome:
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”:
We need a tool to work with discrete values.
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:
<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.
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.
You have two possibilities to enable the inspector:
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.
To switch between classes you can go UP and DOWN with your keyboard.
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.
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).
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:
Just go to the Chrome Web Store and add it to your extension:
We are going to make the tool more robust (it’s still in BETA, but already used for production projects).
Show a breadcrumb to quickly move to parent/children elements:
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.
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.
We are designing a way to preview the responsive version of the inspected component right into the tool: imagine a sort of PiP.
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.
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).
Tailwind Devtools is still in BETA. You can contribute to the project in several ways: