tailwind-to-style 1.0.1
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 +64 -0
- package/index.js +5704 -0
- package/package.json +25 -0
package/README.md
ADDED
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
# tailwind-to-style
|
|
2
|
+
|
|
3
|
+
`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.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
Install the library using npm or yarn:
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
npm install tailwind-to-style
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
or
|
|
14
|
+
|
|
15
|
+
```bash
|
|
16
|
+
yarn add tailwind-to-style
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
## Features
|
|
20
|
+
- Converts Tailwind CSS classes into inline or objects style.
|
|
21
|
+
- Compatible with modern JavaScript frameworks like React.
|
|
22
|
+
- Lightweight and efficient.
|
|
23
|
+
|
|
24
|
+
## Usage
|
|
25
|
+
|
|
26
|
+
```javascript
|
|
27
|
+
import tws from "tailwind-to-style";
|
|
28
|
+
|
|
29
|
+
// Convert classes to inline CSS
|
|
30
|
+
const styleInline = tws(`bg-white mx-auto`);
|
|
31
|
+
// Output: background-color:rgba(255, 255, 255, 1);margin-left:auto;margin-right:auto;
|
|
32
|
+
|
|
33
|
+
// Convert classes to JSON
|
|
34
|
+
const styleJSON = tws(`bg-white mx-auto`, 1);
|
|
35
|
+
// Output: {backgroundColor: 'rgba(255, 255, 255, 1)', marginLeft: 'auto', marginRight: 'auto'}
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
### Example
|
|
39
|
+
|
|
40
|
+
Here is an example of how to use `tailwind-to-style` in a React application:
|
|
41
|
+
|
|
42
|
+
```javascript
|
|
43
|
+
import React from 'react';
|
|
44
|
+
import tws from 'tailwind-to-style';
|
|
45
|
+
|
|
46
|
+
const App = () => {
|
|
47
|
+
return (
|
|
48
|
+
<div style={tws("text-red-500 bg-blue-200 p-4", 1)}>
|
|
49
|
+
Hello, this is styled using tailwind-to-style
|
|
50
|
+
</div>
|
|
51
|
+
);
|
|
52
|
+
};
|
|
53
|
+
|
|
54
|
+
export default App;
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
## License
|
|
58
|
+
|
|
59
|
+
This library is licensed under the MIT License. See the LICENSE file for more details.
|
|
60
|
+
|
|
61
|
+
---
|
|
62
|
+
|
|
63
|
+
Feel free to contribute or raise issues on the [GitHub repository](https://github.com/Bigetion/tailwind-to-style).
|
|
64
|
+
|