🤖 Tailwind CSS assistant helps you to edit classes (includes JIT & ignores purge), toggle breakpoint classes on an element and view current breakpoint

  • By Mark Mead
  • Last update: Dec 10, 2022
  • Comments: 2

Tailwind CSS Assistant

See it in action on this example website 🎉

Tailwind CSS Assistant Example

✅ Small JavaScript package that helps you work with Tailwind CSS by...

  • Showing you the class names of the current element
  • Showing you the current breakpoint
  • Allowing you to toggle breakpoint classes
  • Allowing you to add new classes, including classes created using JIT

Install 🌟

It's very easy to install! 🙌

CDN

<script
  defer
  src="https://unpkg.com/tailwindcss-assistant@latest/dist/assistant.min.js"
></script>

NPM/Yarn

npm i -D tailwindcss-assistant

yarn add -D tailwindcss-assistant
import assistant from 'tailwindcss-assistant'

document.addEventListener('DOMContentLoaded', () => {
  assistant()
})

Stats 📊

Github

https://github.com/markmead/tailwindcss-assistant

Comments(2)

  • 1

    Update - Freshen up

    Freshen up the code and add some new features.

    Added

    • Ability to toggle classes on and off
    • Extracted the adding classes functionality to own file
    • Extracted the toggling classes functionality to own file

    Updated

    • New way of adding classes to the element

    Removed

    • <textarea> that allows for editing classes
  • 2

    fix/code

    This PR adds some fixes and improvements.

    Fixed

    • Firing CMD + Clicka second wouldn't reset currentTarget
    • Disable user select for certain elements Not something I'd recommend but for something like this, it makes sense.

    Updated

    • Titles are now rendered with a function
    • Errors are rendered when attempting to select a relative element that doesn't exist

Popular Tag

Related