Simplify TailwindCSS with TailwindBox

TailwindCSS is powerful, but it can be hard to read. Writing conditional styles can also be a hassle. So I decided to create a lightweight and simple library to solve this problem.

TailwindBox

jnoncode / tailwindbox

Easily manage TailwindCSS styles with simple object-like structures

🔧 Installation

Install TailwindBox via npm or yarn:

npm install tailwindbox
# or
yarn add tailwindbox

🚀 Usage

Here's a quick example of how to use TailwindBox:

import { tw } from "tailwindbox";

function App() {
  const isDarkMode = true;

  const styles = tw({
    base: "p-4 rounded-lg shadow-md",
    dark: { if: isDarkMode, classes: "bg-gray-800 text-white" },
    light: { if: !isDarkMode, classes: "bg-white text-black" },
  });

  return <div className={styles}>Hello, TailwindBox!</div>;
}

export default App;

• base: Always applies the base styles (p-4 rounded-lg shadow-md).
• dark: Applies bg-gray-800 text-white only if isDarkMode is true.
• light: Applies bg-white text-black only if isDarkMode is false.

🌟 Features

• Object-Like Structure: Define TailwindCSS styles in an object-based…

View on GitHub

TailwindBox makes your TailwindCSS code cleaner and easier to manage. Here's a quick example of how to use TailwindBox:

import { tw } from "tailwindbox";

function App() {
  const isDarkMode = true;

  const styles = tw({
    base: "p-4 rounded-lg shadow-md",
    dark: { if: isDarkMode, classes: "bg-gray-800 text-white" },
    light: { if: !isDarkMode, classes: "bg-white text-black" },
  });

  return <div className={styles}>Hello, TailwindBox!</div>;
}

export default App;

• base: Always applies the base styles (p-4 rounded-lg shadow-md).
• dark: Applies bg-gray-800 text-white only if isDarkMode is true.
• light: Applies bg-white text-black only if isDarkMode is false.

Features

• Object-Like Structure: Define TailwindCSS styles in an object-based format.
• Conditional Classes: Apply classes dynamically based on your application's state.
• Improved Readability: Simplify long and complex class strings.
• Lightweight: A minimal library designed for TailwindCSS users.

It will be a great help when you develop with TailwindCSS. Try it out, and feel free to share your feedback anytime!