tailwind-to-style 2.1.5 → 2.1.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +157 -171
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,44 +1,56 @@
|
|
|
1
|
+
|
|
1
2
|
# tailwind-to-style
|
|
2
3
|
|
|
3
|
-
`tailwind-to-style` is a
|
|
4
|
+
`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.
|
|
5
|
+
|
|
6
|
+
The library exposes two main functions:
|
|
7
|
+
|
|
8
|
+
1. **`tws`**: Converts Tailwind CSS classes into inline CSS styles or JavaScript objects (JSON).
|
|
9
|
+
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.
|
|
4
10
|
|
|
5
11
|
## Installation
|
|
6
12
|
|
|
7
|
-
|
|
13
|
+
To use `tailwind-to-style`, install the library using either npm or yarn:
|
|
14
|
+
|
|
15
|
+
### Using npm
|
|
8
16
|
|
|
9
17
|
```bash
|
|
10
18
|
npm install tailwind-to-style
|
|
11
19
|
```
|
|
12
20
|
|
|
13
|
-
|
|
21
|
+
### Using yarn
|
|
14
22
|
|
|
15
23
|
```bash
|
|
16
24
|
yarn add tailwind-to-style
|
|
17
25
|
```
|
|
18
26
|
|
|
19
|
-
##
|
|
27
|
+
## Core Functions
|
|
28
|
+
|
|
29
|
+
### 1. `tws`
|
|
30
|
+
|
|
31
|
+
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.
|
|
20
32
|
|
|
21
|
-
|
|
22
|
-
-
|
|
23
|
-
- Lightweight and efficient.
|
|
33
|
+
#### Features of `tws`:
|
|
34
|
+
- Converts Tailwind utility classes into **inline CSS** or **JSON style objects**.
|
|
24
35
|
|
|
25
|
-
|
|
36
|
+
#### Usage
|
|
26
37
|
|
|
27
38
|
```javascript
|
|
28
39
|
import { tws } from "tailwind-to-style";
|
|
29
40
|
|
|
30
|
-
// Convert classes to inline CSS
|
|
31
|
-
const styleInline = tws(
|
|
32
|
-
// Output: background-color:rgba(255, 255, 255, 1);margin-left:auto;margin-right:auto;
|
|
41
|
+
// Convert Tailwind classes to inline CSS
|
|
42
|
+
const styleInline = tws("bg-white mx-auto");
|
|
43
|
+
// Output: background-color:rgba(255, 255, 255, 1); margin-left:auto; margin-right:auto;
|
|
33
44
|
|
|
34
|
-
// Convert classes to JSON
|
|
35
|
-
const styleJSON = tws(
|
|
36
|
-
// Output: {backgroundColor: 'rgba(255, 255, 255, 1)', marginLeft: 'auto', marginRight: 'auto'}
|
|
45
|
+
// Convert Tailwind classes to JSON style object
|
|
46
|
+
const styleJSON = tws("bg-white mx-auto", 1);
|
|
47
|
+
// Output: { backgroundColor: 'rgba(255, 255, 255, 1)', marginLeft: 'auto', marginRight: 'auto' }
|
|
37
48
|
```
|
|
38
49
|
|
|
39
|
-
|
|
50
|
+
- **First argument**: The string of Tailwind classes to convert.
|
|
51
|
+
- **Second argument (optional)**: Pass `1` to get the result as a JSON object (default is inline CSS when omitted).
|
|
40
52
|
|
|
41
|
-
|
|
53
|
+
#### Example in React:
|
|
42
54
|
|
|
43
55
|
```javascript
|
|
44
56
|
import React from "react";
|
|
@@ -55,169 +67,143 @@ const App = () => {
|
|
|
55
67
|
export default App;
|
|
56
68
|
```
|
|
57
69
|
|
|
58
|
-
|
|
70
|
+
This will apply the Tailwind classes directly as inline styles in the React component.
|
|
71
|
+
|
|
72
|
+
### 2. `twsx`
|
|
73
|
+
|
|
74
|
+
`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.
|
|
75
|
+
|
|
76
|
+
#### Features of `twsx`:
|
|
77
|
+
- Allows **nested styles** similar to SCSS, enabling more complex CSS structures.
|
|
78
|
+
- **Grouping**: Supports grouping utilities inside parentheses, making the code more readable and modular.
|
|
79
|
+
- Fully supports **responsive variants** (`sm`, `md`, `lg`, etc.).
|
|
80
|
+
- Handles **state variants** like `hover`, `focus`, and more.
|
|
81
|
+
- Supports **dynamic utilities** such as `w-[300px]`, `bg-[rgba(0,0,0,0.5)]`.
|
|
82
|
+
|
|
83
|
+
#### Usage
|
|
59
84
|
|
|
60
85
|
```javascript
|
|
61
|
-
import React from "react";
|
|
62
|
-
import Helmet from "react-helmet";
|
|
63
86
|
import { twsx } from "tailwind-to-style";
|
|
64
87
|
|
|
65
|
-
const
|
|
66
|
-
".
|
|
67
|
-
"
|
|
88
|
+
const styles = twsx({
|
|
89
|
+
".card": [
|
|
90
|
+
"bg-white p-4 rounded-lg",
|
|
68
91
|
{
|
|
69
|
-
"&:
|
|
70
|
-
"
|
|
71
|
-
"
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
"&.large": "text-lg px-5 py-3",
|
|
75
|
-
"&.x-large": "text-xl px-6 py-3.5",
|
|
76
|
-
"&.rounded": "rounded-full",
|
|
77
|
-
"&.info": [
|
|
78
|
-
"text-white bg-sky-500 outline-sky-400",
|
|
79
|
-
{
|
|
80
|
-
"&:not(:disabled):hover": "text-white bg-sky-600",
|
|
81
|
-
},
|
|
82
|
-
],
|
|
83
|
-
"&.success": [
|
|
84
|
-
"text-white bg-green-500 outline-green-400",
|
|
85
|
-
{
|
|
86
|
-
"&:not(:disabled):hover": "text-white bg-green-600",
|
|
87
|
-
},
|
|
88
|
-
],
|
|
89
|
-
"&.warning": [
|
|
90
|
-
"text-white bg-amber-500 outline-amber-400",
|
|
91
|
-
{
|
|
92
|
-
"&:not(:disabled):hover": "text-white bg-amber-600",
|
|
93
|
-
},
|
|
94
|
-
],
|
|
95
|
-
"&.danger": [
|
|
96
|
-
"text-white bg-red-500 outline-red-400",
|
|
97
|
-
{
|
|
98
|
-
"&:not(:disabled):hover": "text-white bg-red-600",
|
|
99
|
-
},
|
|
100
|
-
],
|
|
101
|
-
"&.outlined": [
|
|
102
|
-
"border bg-white text-gray-900",
|
|
103
|
-
{
|
|
104
|
-
"&.info": "border-sky-500",
|
|
105
|
-
"&.success": "border-green-500",
|
|
106
|
-
"&.warning": "border-amber-500",
|
|
107
|
-
"&.danger": "border-red-500",
|
|
108
|
-
},
|
|
109
|
-
],
|
|
110
|
-
},
|
|
111
|
-
],
|
|
92
|
+
"&:hover": "shadow-lg",
|
|
93
|
+
".title": "text-lg font-bold",
|
|
94
|
+
".desc": "text-sm text-gray-500"
|
|
95
|
+
}
|
|
96
|
+
]
|
|
112
97
|
});
|
|
113
98
|
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
<>
|
|
117
|
-
<Helmet>
|
|
118
|
-
<style>{buttonStyle}</style>
|
|
119
|
-
</Helmet>
|
|
120
|
-
<div className="flex flex-col p-5">
|
|
121
|
-
<h1 className="mb-2">Button Fill</h1>
|
|
122
|
-
<div className="space-x-2 mb-8">
|
|
123
|
-
<button type="button" className="btn">
|
|
124
|
-
Button
|
|
125
|
-
</button>
|
|
126
|
-
<button type="button" className="btn info">
|
|
127
|
-
Button
|
|
128
|
-
</button>
|
|
129
|
-
<button type="button" className="btn success">
|
|
130
|
-
Button
|
|
131
|
-
</button>
|
|
132
|
-
<button type="button" className="btn warning">
|
|
133
|
-
Button
|
|
134
|
-
</button>
|
|
135
|
-
<button type="button" className="btn danger">
|
|
136
|
-
Button
|
|
137
|
-
</button>
|
|
138
|
-
</div>
|
|
139
|
-
|
|
140
|
-
<h1 className="mb-2">Button Outlined</h1>
|
|
141
|
-
<div className="space-x-2 mb-8">
|
|
142
|
-
<button type="button" className="btn outlined">
|
|
143
|
-
Button
|
|
144
|
-
</button>
|
|
145
|
-
<button type="button" className="btn outlined info">
|
|
146
|
-
Button
|
|
147
|
-
</button>
|
|
148
|
-
<button type="button" className="btn outlined success">
|
|
149
|
-
Button
|
|
150
|
-
</button>
|
|
151
|
-
<button type="button" className="btn outlined warning">
|
|
152
|
-
Button
|
|
153
|
-
</button>
|
|
154
|
-
<button type="button" className="btn outlined danger">
|
|
155
|
-
Button
|
|
156
|
-
</button>
|
|
157
|
-
</div>
|
|
158
|
-
|
|
159
|
-
<h1 className="mb-2">Button Disabled</h1>
|
|
160
|
-
<div className="space-x-2 mb-8">
|
|
161
|
-
<button type="button" disabled className="btn">
|
|
162
|
-
Button
|
|
163
|
-
</button>
|
|
164
|
-
<button type="button" disabled className="btn info">
|
|
165
|
-
Button
|
|
166
|
-
</button>
|
|
167
|
-
<button type="button" disabled className="btn success">
|
|
168
|
-
Button
|
|
169
|
-
</button>
|
|
170
|
-
<button type="button" disabled className="btn warning">
|
|
171
|
-
Button
|
|
172
|
-
</button>
|
|
173
|
-
<button type="button" disabled className="btn danger">
|
|
174
|
-
Button
|
|
175
|
-
</button>
|
|
176
|
-
</div>
|
|
177
|
-
|
|
178
|
-
<h1 className="mb-2">Button Size</h1>
|
|
179
|
-
<div className="space-x-2 mb-8">
|
|
180
|
-
<button type="button" className="btn x-small">
|
|
181
|
-
Button
|
|
182
|
-
</button>
|
|
183
|
-
<button type="button" className="btn small">
|
|
184
|
-
Button
|
|
185
|
-
</button>
|
|
186
|
-
<button type="button" className="btn">
|
|
187
|
-
Button
|
|
188
|
-
</button>
|
|
189
|
-
<button type="button" className="btn large">
|
|
190
|
-
Button
|
|
191
|
-
</button>
|
|
192
|
-
<button type="button" className="btn x-large">
|
|
193
|
-
Button
|
|
194
|
-
</button>
|
|
195
|
-
</div>
|
|
196
|
-
|
|
197
|
-
<h1 className="mb-2">Button Rounded</h1>
|
|
198
|
-
<div className="space-x-2 mb-8">
|
|
199
|
-
<button type="button" className="btn rounded">
|
|
200
|
-
Button
|
|
201
|
-
</button>
|
|
202
|
-
<button type="button" className="btn rounded info">
|
|
203
|
-
Button
|
|
204
|
-
</button>
|
|
205
|
-
<button type="button" className="btn rounded success">
|
|
206
|
-
Button
|
|
207
|
-
</button>
|
|
208
|
-
<button type="button" className="btn rounded warning">
|
|
209
|
-
Button
|
|
210
|
-
</button>
|
|
211
|
-
<button type="button" className="btn rounded danger">
|
|
212
|
-
Button
|
|
213
|
-
</button>
|
|
214
|
-
</div>
|
|
215
|
-
</div>
|
|
216
|
-
</>
|
|
217
|
-
);
|
|
218
|
-
};
|
|
99
|
+
console.log(styles);
|
|
100
|
+
```
|
|
219
101
|
|
|
220
|
-
|
|
102
|
+
This will generate CSS like:
|
|
103
|
+
|
|
104
|
+
```css
|
|
105
|
+
.card {
|
|
106
|
+
background-color: white;
|
|
107
|
+
padding: 1rem;
|
|
108
|
+
border-radius: 0.5rem;
|
|
109
|
+
}
|
|
110
|
+
.card:hover {
|
|
111
|
+
box-shadow: 0 10px 15px rgba(0,0,0,0.1);
|
|
112
|
+
}
|
|
113
|
+
.card .title {
|
|
114
|
+
font-size: 1.125rem;
|
|
115
|
+
font-weight: bold;
|
|
116
|
+
}
|
|
117
|
+
.card .desc {
|
|
118
|
+
font-size: 0.875rem;
|
|
119
|
+
color: #6b7280;
|
|
120
|
+
}
|
|
121
|
+
```
|
|
122
|
+
|
|
123
|
+
#### Grouping Support:
|
|
124
|
+
|
|
125
|
+
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.
|
|
126
|
+
|
|
127
|
+
```javascript
|
|
128
|
+
const styles = twsx({
|
|
129
|
+
".button": [
|
|
130
|
+
"bg-blue-500 text-white p-2 rounded-md",
|
|
131
|
+
{
|
|
132
|
+
"&:hover": "bg-blue-600",
|
|
133
|
+
".icon": "text-lg"
|
|
134
|
+
}
|
|
135
|
+
]
|
|
136
|
+
});
|
|
137
|
+
|
|
138
|
+
console.log(styles);
|
|
139
|
+
```
|
|
140
|
+
|
|
141
|
+
**Output**:
|
|
142
|
+
|
|
143
|
+
```css
|
|
144
|
+
.button {
|
|
145
|
+
background-color: #3b82f6;
|
|
146
|
+
color: white;
|
|
147
|
+
padding: 0.5rem;
|
|
148
|
+
border-radius: 0.375rem;
|
|
149
|
+
}
|
|
150
|
+
.button:hover {
|
|
151
|
+
background-color: #2563eb;
|
|
152
|
+
}
|
|
153
|
+
.button .icon {
|
|
154
|
+
font-size: 1.125rem;
|
|
155
|
+
}
|
|
156
|
+
```
|
|
157
|
+
|
|
158
|
+
#### Dynamic Utilities:
|
|
159
|
+
|
|
160
|
+
`twsx` supports dynamic values in utilities like `w-[300px]` and `bg-[rgba(0,0,0,0.5)]`.
|
|
161
|
+
|
|
162
|
+
```javascript
|
|
163
|
+
const styles = twsx({
|
|
164
|
+
".box": "w-[300px] h-[50vh] bg-[rgba(0,0,0,0.5)]"
|
|
165
|
+
});
|
|
166
|
+
|
|
167
|
+
console.log(styles);
|
|
168
|
+
```
|
|
169
|
+
|
|
170
|
+
**Output**:
|
|
171
|
+
|
|
172
|
+
```css
|
|
173
|
+
.box {
|
|
174
|
+
width: 300px;
|
|
175
|
+
height: 50vh;
|
|
176
|
+
background-color: rgba(0,0,0,0.5);
|
|
177
|
+
}
|
|
178
|
+
```
|
|
179
|
+
|
|
180
|
+
#### Grouping Example:
|
|
181
|
+
|
|
182
|
+
You can group related utilities for better readability:
|
|
183
|
+
|
|
184
|
+
```javascript
|
|
185
|
+
const styles = twsx({
|
|
186
|
+
".alert": "hover:(bg-yellow-500 text-black) md:(px-6 py-3)"
|
|
187
|
+
});
|
|
188
|
+
|
|
189
|
+
console.log(styles);
|
|
190
|
+
```
|
|
191
|
+
|
|
192
|
+
This generates:
|
|
193
|
+
|
|
194
|
+
```css
|
|
195
|
+
.alert:hover {
|
|
196
|
+
background-color: #f59e0b;
|
|
197
|
+
color: #000;
|
|
198
|
+
}
|
|
199
|
+
@media (min-width: 768px) {
|
|
200
|
+
.alert {
|
|
201
|
+
padding-left: 1.5rem;
|
|
202
|
+
padding-right: 1.5rem;
|
|
203
|
+
padding-top: 0.75rem;
|
|
204
|
+
padding-bottom: 0.75rem;
|
|
205
|
+
}
|
|
206
|
+
}
|
|
221
207
|
```
|
|
222
208
|
|
|
223
209
|
## License
|