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
<span># or</span>
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:

npm install tailwindbox
<span># or</span>
yarn add tailwindbox

• 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!

The above is the detailed content of Simplify TailwindCSS with TailwindBox. For more information, please follow other related articles on the PHP Chinese website!