Simplify TailwindCSS with TailwindBox

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!