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

Related tags

Learning resource tailwindcss tailwind-css tailwindcss-plugin
Overview

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 📊

You might also like...

DoMe is a ToDo App. you can add, delete and reorder elements of the todo list using drag and drop. You can also toggle between dark&light mode

DO ME Todo App Live Preview : DO ME Built With : - ReactJS - TailwindCSS Make sure you have: - Git - Nodejs version 14 or higher (we recommend using

Nov 18, 2022

JavaScript micro-library: pass in an element and a callback and this will trigger when you click anywhere other than the element

Add a click listener to fire a callback for everywhere on the window except your chosen element. Installation run npm install @lukeboyle/when-clicked-

May 13, 2021

The Easel Javascript library provides a full, hierarchical display list, a core interaction model, and helper classes to make working with the HTML5 Canvas element much easier.

EaselJS EaselJS is a library for building high-performance interactive 2D content in HTML5. It provides a feature-rich display list to allow you to ma

Dec 29, 2022

⏪ Rewinds – Remix Tailwind Starter Kit with Tailwind CSS, Headless UI, Radix UI, and more

⏪ Rewinds – Remix Tailwind Starter Kit with Tailwind CSS, Headless UI, Radix UI, and more

⏪ Rewinds – Remix Tailwind Starter Kit Rewinds is a Remix starter kit with Tailwind CSS v3 family of libraries. This is an example demo to combine the

Dec 24, 2022

StarkNet support extension for VSCode. Visualize StarkNet contracts: view storage variables, external and view functions, and events.

StarkNet support extension for VSCode. Visualize StarkNet contracts: view storage variables, external and view functions, and events.

StarkNet Explorer extension This VSCode extension quickly shows relevant aspects of StarkNet contracts: Storage variables of the current contract, and

Nov 4, 2022

An Awesome Toggle Menu created with HTML,CSS,JQuery,font-awesome and line by line comment.

An Awesome Toggle Menu created with HTML,CSS,JQuery,font-awesome and line by line comment.

Demo : https://blackx-732.github.io/AwesomeMenu/ Under open source license No ©copyright issues Anyone can be modify this code as well Specifically we

Feb 9, 2021

Pure CSS toggle switch

Pure CSS toggle switch demo install npm i toggle-switch-css or yarn add toggle-switch-css use label class="toggle-switch my-toggle-switch" in

Sep 14, 2021

A pure CSS toggle switch for form input checkboxes

A pure CSS toggle switch for form input checkboxes

Toggle Switchy A pure CSS toggle switch for form input checkboxes Preview Installation CSS link rel="stylesheet" href="toggle-switchy.css" HTML lab

Dec 8, 2022

Sort tailwind classes for each elements className list by a given order-config

eslint-plugin-tailwind-classname-order This eslint plugin automatically orders the tailwind classes included in the className tags from each element b

Nov 25, 2022
Comments
  • Update - Freshen up

    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
    opened by markmead 0
  • fix/code

    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
    opened by markmead 0
Owner
Mark Mead
Creator of HyperUI 🎉
Mark Mead
GitHub https://tailwindcss-assistant-example.vercel.app/
Execute obsidian commands with short key sequences. For example, 'tp' for 'Toggle Preview' and 'tb' for 'Toggle Sidebar'. Easier to remember.

Key Sequence Shortcut Key Sequence Shortcut is an obsidian plugin, allow binding key sequences to an obsidian command. For example If we assume "t" st

Yu Wang 26 Dec 26, 2022
linuxbu - a chrome extension that helps you to enter SBU classes via html-view in linux

linuxbu is a chrome extension that helps you to enter SBU classes via html-view in linux

Hasan Zonuzi 8 Dec 19, 2022
A plugin for Strapi CMS that adds a preview button and live view button to the content manager edit view.

Strapi Preview Button A plugin for Strapi CMS that adds a preview button and live view button to the content manager edit view. Get Started Features I

Matt Milburn 53 Dec 30, 2022
DJS Purge Command (Discord.js V14)

Purge Cmd DJS Purge Command (Discord.js V14) Shields.io MidNight Bot Click Me to Invite The Bot Click Me To reach my support Server Dependencies disco

mid_night 3 Dec 13, 2022
JIT Compiler is a open source online code compiler. You can run more than 40+ most popular programming languages in your browser just-in-time using jitcompiler.

JIT Compiler is a open source online code compiler. You can run more than 40+ most popular programming languages in your browser just-in-time using jitcompiler.

Rajkumar Dusad 36 Jan 5, 2023
A tiny JavaScript library to easily toggle the state of any HTML element in any contexts, and create UI components in no time.

A tiny JavaScript library to easily toggle the state of any HTML element in any contexts, and create UI components in no time. Dropdown, navigation bu

Matthieu Bué 277 Nov 25, 2022
An npm package with Tailwind CSS utility classes for creating responsive grid columns without media queries using auto fit.

Grid Auto Fit for Tailwind CSS A plugin that helps you create a responsive grid layout in Tailwind CSS without using media queries. It uses the auto-f

Thirus 80 Dec 28, 2022
Quick access to view the current time and date in Ethiopian calendar.

Ethiopian-Current-time-chrome-extension Quick access to view the current time and date in Ethiopian calendar. steps to follow:- Extract the zip folder

null 10 Aug 26, 2022
The to-do list project is an app that allows users to successfully organize their day by inputting prioritized tasks. The project also allows users to carry out the CRUD operations for (add, edit and delete). Two special features of the app are that it saves tasks in the local storage of the user's browser, so when the user reloads or revisits the app, the user can view a list of tasks formerly inputted, and it allows users to prioritize their tasks by dragging up and down the list section.

TO-DO-LIST This is a To Do List Project that dynamically displays tasks to be done with interactions for removing and adding task when completed or no

Francis Ugorji 9 Nov 1, 2021
375 DSA Tracker helps you build your confidence in solving any coding related question and helps you prepare for your placements. It is your personal web-based progress tracker based on 375 DSA Sheet by Aman Dhattarwal & Shradha Didi

375-DSA Tracker ??‍?? Me and my friend Abhilash Jena made a 375 DSA Tracker website based on 375 DSA Sheet by Aman Dhattarwal & Shradha Didi which hel

null 8 Nov 11, 2022