tailwind-to-style 2.1.5 → 2.1.6

package/README.md

@@ -1,44 +1,56 @@
+
 # tailwind-to-style
 
-`tailwind-to-style` is a lightweight JavaScript library to convert Tailwind CSS classes into inline styles. This is particularly useful for dynamically applying styles in frameworks like React.
+`tailwind-to-style` is a JavaScript library designed to convert Tailwind CSS utility classes into inline styles or JavaScript objects. This is especially useful when you need to dynamically apply styles to elements in frameworks like React, where inline styles or style objects are frequently used.
+
+The library exposes two main functions:
+
+1. **`tws`**: Converts Tailwind CSS classes into inline CSS styles or JavaScript objects (JSON).
+2. **`twsx`**: A more advanced function that allows you to define nested and complex styles similar to SCSS, including support for responsive, state variants, and grouping.
 
 ## Installation
 
-Install the library using npm or yarn:
+To use `tailwind-to-style`, install the library using either npm or yarn:
+
+### Using npm
 
 ```bash
 npm install tailwind-to-style
 ```
 
-or
+### Using yarn
 
 ```bash
 yarn add tailwind-to-style
 ```
 
-## Features
+## Core Functions
+
+### 1. `tws`
+
+The `tws` function is designed to convert Tailwind CSS utility classes into either **inline CSS** or **JSON style objects**. This makes it particularly useful for applying styles dynamically in React or similar frameworks where inline styles or style objects are often needed.
 
-- Converts Tailwind CSS classes into inline or objects style.
-- Compatible with modern JavaScript frameworks like React.
-- Lightweight and efficient.
+#### Features of `tws`:
+- Converts Tailwind utility classes into **inline CSS** or **JSON style objects**.
 
-## Usage
+#### Usage
 
 ```javascript
 import { tws } from "tailwind-to-style";
 
-// Convert classes to inline CSS
-const styleInline = tws(`bg-white mx-auto`);
-// Output: background-color:rgba(255, 255, 255, 1);margin-left:auto;margin-right:auto;
+// Convert Tailwind classes to inline CSS
+const styleInline = tws("bg-white mx-auto");
+// Output: background-color:rgba(255, 255, 255, 1); margin-left:auto; margin-right:auto;
 
-// Convert classes to JSON
-const styleJSON = tws(`bg-white mx-auto`, 1);
-// Output: {backgroundColor: 'rgba(255, 255, 255, 1)', marginLeft: 'auto', marginRight: 'auto'}
+// Convert Tailwind classes to JSON style object
+const styleJSON = tws("bg-white mx-auto", 1);
+// Output: { backgroundColor: 'rgba(255, 255, 255, 1)', marginLeft: 'auto', marginRight: 'auto' }
 ```
 
-### Example
+- **First argument**: The string of Tailwind classes to convert.
+- **Second argument (optional)**: Pass `1` to get the result as a JSON object (default is inline CSS when omitted).
 
-Here is an example of how to use `tailwind-to-style` in a React application:
+#### Example in React:
 
 ```javascript
 import React from "react";
@@ -55,169 +67,143 @@ const App = () => {
 export default App;
 ```
 
-Button example
+This will apply the Tailwind classes directly as inline styles in the React component.
+
+### 2. `twsx`
+
+`twsx` is an advanced function that builds on `tws` by allowing you to define **nested styles** and more complex CSS structures. It supports **grouping**, **responsive variants**, **state variants**, and **dynamic utilities**, making it ideal for more advanced styling needs.
+
+#### Features of `twsx`:
+- Allows **nested styles** similar to SCSS, enabling more complex CSS structures.
+- **Grouping**: Supports grouping utilities inside parentheses, making the code more readable and modular.
+- Fully supports **responsive variants** (`sm`, `md`, `lg`, etc.).
+- Handles **state variants** like `hover`, `focus`, and more.
+- Supports **dynamic utilities** such as `w-[300px]`, `bg-[rgba(0,0,0,0.5)]`.
+
+#### Usage
 
 ```javascript
-import React from "react";
-import Helmet from "react-helmet";
 import { twsx } from "tailwind-to-style";
 
-const buttonStyle = twsx({
-  ".btn": [
-    "text-black px-4 py-2.5 bg-gray-200 outline-gray-400 rounded-lg cursor-pointer",
+const styles = twsx({
+  ".card": [
+    "bg-white p-4 rounded-lg",
     {
-      "&:not(:disabled):hover": "bg-gray-300",
-      "&:focus": "outline outline-[3px]",
-      "&:disabled": "opacity-50 cursor-not-allowed",
-      "&.x-small": "text-xs px-2.5 py-1.5",
-      "&.small": "text-sm px-3 py-2",
-      "&.large": "text-lg px-5 py-3",
-      "&.x-large": "text-xl px-6 py-3.5",
-      "&.rounded": "rounded-full",
-      "&.info": [
-        "text-white bg-sky-500 outline-sky-400",
-        {
-          "&:not(:disabled):hover": "text-white bg-sky-600",
-        },
-      ],
-      "&.success": [
-        "text-white bg-green-500 outline-green-400",
-        {
-          "&:not(:disabled):hover": "text-white bg-green-600",
-        },
-      ],
-      "&.warning": [
-        "text-white bg-amber-500 outline-amber-400",
-        {
-          "&:not(:disabled):hover": "text-white bg-amber-600",
-        },
-      ],
-      "&.danger": [
-        "text-white bg-red-500 outline-red-400",
-        {
-          "&:not(:disabled):hover": "text-white bg-red-600",
-        },
-      ],
-      "&.outlined": [
-        "border bg-white text-gray-900",
-        {
-          "&.info": "border-sky-500",
-          "&.success": "border-green-500",
-          "&.warning": "border-amber-500",
-          "&.danger": "border-red-500",
-        },
-      ],
-    },
-  ],
+      "&:hover": "shadow-lg",
+      ".title": "text-lg font-bold",
+      ".desc": "text-sm text-gray-500"
+    }
+  ]
 });
 
-const App = () => {
-  return (
-    <>
-      <Helmet>
-        <style>{buttonStyle}</style>
-      </Helmet>
-      <div className="flex flex-col p-5">
-        <h1 className="mb-2">Button Fill</h1>
-        <div className="space-x-2 mb-8">
-          <button type="button" className="btn">
-            Button
-          </button>
-          <button type="button" className="btn info">
-            Button
-          </button>
-          <button type="button" className="btn success">
-            Button
-          </button>
-          <button type="button" className="btn warning">
-            Button
-          </button>
-          <button type="button" className="btn danger">
-            Button
-          </button>
-        </div>
-
-        <h1 className="mb-2">Button Outlined</h1>
-        <div className="space-x-2 mb-8">
-          <button type="button" className="btn outlined">
-            Button
-          </button>
-          <button type="button" className="btn outlined info">
-            Button
-          </button>
-          <button type="button" className="btn outlined success">
-            Button
-          </button>
-          <button type="button" className="btn outlined warning">
-            Button
-          </button>
-          <button type="button" className="btn outlined danger">
-            Button
-          </button>
-        </div>
-
-        <h1 className="mb-2">Button Disabled</h1>
-        <div className="space-x-2 mb-8">
-          <button type="button" disabled className="btn">
-            Button
-          </button>
-          <button type="button" disabled className="btn info">
-            Button
-          </button>
-          <button type="button" disabled className="btn success">
-            Button
-          </button>
-          <button type="button" disabled className="btn warning">
-            Button
-          </button>
-          <button type="button" disabled className="btn danger">
-            Button
-          </button>
-        </div>
-
-        <h1 className="mb-2">Button Size</h1>
-        <div className="space-x-2 mb-8">
-          <button type="button" className="btn x-small">
-            Button
-          </button>
-          <button type="button" className="btn small">
-            Button
-          </button>
-          <button type="button" className="btn">
-            Button
-          </button>
-          <button type="button" className="btn large">
-            Button
-          </button>
-          <button type="button" className="btn x-large">
-            Button
-          </button>
-        </div>
-
-        <h1 className="mb-2">Button Rounded</h1>
-        <div className="space-x-2 mb-8">
-          <button type="button" className="btn rounded">
-            Button
-          </button>
-          <button type="button" className="btn rounded info">
-            Button
-          </button>
-          <button type="button" className="btn rounded success">
-            Button
-          </button>
-          <button type="button" className="btn rounded warning">
-            Button
-          </button>
-          <button type="button" className="btn rounded danger">
-            Button
-          </button>
-        </div>
-      </div>
-    </>
-  );
-};
+console.log(styles);
+```
 
-export default App;
+This will generate CSS like:
+
+```css
+.card {
+  background-color: white;
+  padding: 1rem;
+  border-radius: 0.5rem;
+}
+.card:hover {
+  box-shadow: 0 10px 15px rgba(0,0,0,0.1);
+}
+.card .title {
+  font-size: 1.125rem;
+  font-weight: bold;
+}
+.card .desc {
+  font-size: 0.875rem;
+  color: #6b7280;
+}
+```
+
+#### Grouping Support:
+
+With `twsx`, you can group related utilities together inside parentheses, making the CSS more modular and easier to manage. This is especially useful for responsive and state variants.
+
+```javascript
+const styles = twsx({
+  ".button": [
+    "bg-blue-500 text-white p-2 rounded-md",
+    {
+      "&:hover": "bg-blue-600",
+      ".icon": "text-lg"
+    }
+  ]
+});
+
+console.log(styles);
+```
+
+**Output**:
+
+```css
+.button {
+  background-color: #3b82f6;
+  color: white;
+  padding: 0.5rem;
+  border-radius: 0.375rem;
+}
+.button:hover {
+  background-color: #2563eb;
+}
+.button .icon {
+  font-size: 1.125rem;
+}
+```
+
+#### Dynamic Utilities:
+
+`twsx` supports dynamic values in utilities like `w-[300px]` and `bg-[rgba(0,0,0,0.5)]`.
+
+```javascript
+const styles = twsx({
+  ".box": "w-[300px] h-[50vh] bg-[rgba(0,0,0,0.5)]"
+});
+
+console.log(styles);
+```
+
+**Output**:
+
+```css
+.box {
+  width: 300px;
+  height: 50vh;
+  background-color: rgba(0,0,0,0.5);
+}
+```
+
+#### Grouping Example:
+
+You can group related utilities for better readability:
+
+```javascript
+const styles = twsx({
+  ".alert": "hover:(bg-yellow-500 text-black) md:(px-6 py-3)"
+});
+
+console.log(styles);
+```
+
+This generates:
+
+```css
+.alert:hover {
+  background-color: #f59e0b;
+  color: #000;
+}
+@media (min-width: 768px) {
+  .alert {
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+    padding-top: 0.75rem;
+    padding-bottom: 0.75rem;
+  }
+}
 ```
 
 ## License

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tailwind-to-style",
-  "version": "2.1.5",
+  "version": "2.1.6",
   "description": "Convert tailwind classes to inline style",
   "main": "index.js",
   "scripts": {