tailwind-to-style 1.1.4 → 1.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 +168 -3
- package/index.js +3 -3
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -17,6 +17,7 @@ yarn add tailwind-to-style
|
|
|
17
17
|
```
|
|
18
18
|
|
|
19
19
|
## Features
|
|
20
|
+
|
|
20
21
|
- Converts Tailwind CSS classes into inline or objects style.
|
|
21
22
|
- Compatible with modern JavaScript frameworks like React.
|
|
22
23
|
- Lightweight and efficient.
|
|
@@ -40,8 +41,8 @@ const styleJSON = tws(`bg-white mx-auto`, 1);
|
|
|
40
41
|
Here is an example of how to use `tailwind-to-style` in a React application:
|
|
41
42
|
|
|
42
43
|
```javascript
|
|
43
|
-
import React from
|
|
44
|
-
import { tws } from
|
|
44
|
+
import React from "react";
|
|
45
|
+
import { tws } from "tailwind-to-style";
|
|
45
46
|
|
|
46
47
|
const App = () => {
|
|
47
48
|
return (
|
|
@@ -54,6 +55,171 @@ const App = () => {
|
|
|
54
55
|
export default App;
|
|
55
56
|
```
|
|
56
57
|
|
|
58
|
+
Button example
|
|
59
|
+
|
|
60
|
+
```javascript
|
|
61
|
+
import React from "react";
|
|
62
|
+
import Helmet from "react-helmet";
|
|
63
|
+
import { twsx } from "tailwind-to-style";
|
|
64
|
+
|
|
65
|
+
const buttonStyle = twsx({
|
|
66
|
+
".btn": [
|
|
67
|
+
"text-black px-4 py-2.5 bg-gray-200 outline-gray-400 rounded-lg cursor-pointer",
|
|
68
|
+
{
|
|
69
|
+
"&:not(:disabled):hover": "bg-gray-300",
|
|
70
|
+
"&:focus": "outline outline-[3px]",
|
|
71
|
+
"&:disabled": "opacity-50 cursor-not-allowed",
|
|
72
|
+
"&.x-small": "text-xs px-2.5 py-1.5",
|
|
73
|
+
"&.small": "text-sm px-3 py-2",
|
|
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
|
+
],
|
|
112
|
+
});
|
|
113
|
+
|
|
114
|
+
const App = () => {
|
|
115
|
+
return (
|
|
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
|
+
};
|
|
219
|
+
|
|
220
|
+
export default App;
|
|
221
|
+
```
|
|
222
|
+
|
|
57
223
|
## License
|
|
58
224
|
|
|
59
225
|
This library is licensed under the MIT License. See the LICENSE file for more details.
|
|
@@ -61,4 +227,3 @@ This library is licensed under the MIT License. See the LICENSE file for more de
|
|
|
61
227
|
---
|
|
62
228
|
|
|
63
229
|
Feel free to contribute or raise issues on the [GitHub repository](https://github.com/Bigetion/tailwind-to-style).
|
|
64
|
-
|
package/index.js
CHANGED
|
@@ -5710,6 +5710,9 @@ const breakpoints = {
|
|
|
5710
5710
|
"2xl": "@media (min-width: 1536px)",
|
|
5711
5711
|
};
|
|
5712
5712
|
|
|
5713
|
+
const twString = generateTailwindCssString().replace(/\s\s+/g, " ");
|
|
5714
|
+
const cssObject = convertCssToObject(twString);
|
|
5715
|
+
|
|
5713
5716
|
function tws(classNames, convertToJson) {
|
|
5714
5717
|
if (
|
|
5715
5718
|
[
|
|
@@ -5721,9 +5724,6 @@ function tws(classNames, convertToJson) {
|
|
|
5721
5724
|
return convertToJson ? {} : "";
|
|
5722
5725
|
}
|
|
5723
5726
|
|
|
5724
|
-
const cssString = generateTailwindCssString().replace(/\s\s+/g, " ");
|
|
5725
|
-
const cssObject = convertCssToObject(cssString);
|
|
5726
|
-
|
|
5727
5727
|
const classes = classNames.match(/[\w-]+\[[^\]]+\]|[\w-]+\.\d+|[\w-]+/g);
|
|
5728
5728
|
|
|
5729
5729
|
let cssResult = classes.map((className) => {
|