@unmilley/tw-master-class v1.0.0

🍪 Tailwind master class

Master class - this class is used exclusively during the dev stage to define the boundaries of the elements.

Install

Install package:

# yarn
yarn add -D @unmilley/tw-master-class
# npm
npm install -D @unmilley/tw-master-class
# pnpm
pnpm install -D @unmilley/tw-master-class

Reminder:

NODE_ENV == "production" => The classes don't work

Usage

/* tailwind.config.ts */
import type { Config } from "tailwindcss";
import { masterClass, type MasterClassConfig } from "@unmilley/tw-master-class";

export default <Config>{
  plugins: [masterClass],
  // optional
  masterClass: <MasterClassConfig>{
    name: "DEBUG",
    color: "lightgreen",
  },
};

<!-- example.html -->
<section class="text-gray-600 body-font">
  <div class="container px-5 py-24 mx-auto">
    <div class="flex flex-col text-center w-full mb-12 DEBUG DEBUG3">
      <h1
        class="sm:text-3xl text-2xl font-medium title-font mb-4 text-gray-900"
      >
        Master Cleanse Reliac Heirloom
      </h1>
      <p class="lg:w-2/3 mx-auto leading-relaxed text-base">
        Whatever cardigan tote bag tumblr hexagon brooklyn asymmetrical
        gentrify, subway tile poke farm-to-table. Franzen you probably haven't
        heard of them man bun deep.
      </p>
    </div>
  </div>
</section>

Development

• Clone this repository
• Install latest LTS version of Node.js
• Enable Corepack using corepack enable
• Install dependencies using pnpm install
• Run interactive tests using pnpm dev

License

MIT. Made with 💛