You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
The Tailwind CSS Stripes Plugin provides a set of utility classes and components that allow you to easily create striped backgrounds for your HTML elements. It offers a flexible way to customize the color, size, opacity, and animation direction of the stripes.
15
+
The Tailwind CSS Stripes Plugin provides a set of utility classes and components that allow you to easily create striped backgrounds for your HTML elements. It offers a flexible way to customize the color, size, opacity, and animation
16
+
direction of the stripes.
14
17
15
18
16
19
17
-
18
20
## Installation
21
+
19
22
To use the Tailwind CSS Stripes Plugin, you need to have Tailwind CSS installed in your project. If you don't have it yet, you can follow the installation guide to set it up.
20
23
21
24
Once you have Tailwind CSS installed, you can add the Stripes Plugin to your project using pnpm, npm or yarn:
22
25
26
+
#### Using pnpm
27
+
23
28
```bash
24
-
npm install @designbycode/tailwindcss-stripes
29
+
pnpm add @designbycode/tailwindcss-stripes
25
30
```
26
-
or
31
+
32
+
#### Using npm
33
+
27
34
```bash
28
-
pnpm install @designbycode/tailwindcss-stripes
35
+
npm install @designbycode/tailwindcss-stripes
29
36
```
30
-
or
37
+
38
+
#### Using yarn
39
+
31
40
```bash
32
-
yarn install @designbycode/tailwindcss-stripes
41
+
yarn add @designbycode/tailwindcss-stripes
33
42
```
34
43
35
44
## Configuration
45
+
36
46
To enable the Stripes Plugin, you need to add it to your Tailwind CSS configuration file. Open your tailwind.config.js and import the plugin at the top of the file:
37
47
38
48
```javascript
39
49
module.exports= {
40
-
// Your existing configuration...
41
-
plugins: [
42
-
// Other plugins...
43
-
require("@designbycode/tailwindcss-stripes"),
44
-
],
50
+
// Your existing configuration...
51
+
plugins: [
52
+
// Other plugins...
53
+
require("@designbycode/tailwindcss-stripes"),
54
+
],
45
55
};
46
56
```
47
57
48
58
## Usage
59
+
49
60
Once the Stripes Plugin is installed and added to your configuration, you can start using the utility classes and components to create striped backgrounds.
50
61
51
62
### Utility Classes
63
+
52
64
The plugin provides the following utility classes:
53
65
54
66
#### Stripes Utility
@@ -58,8 +70,9 @@ The plugin provides the following utility classes:
58
70
The ```.stripes``` class creates a container with relative positioning, isolates its contents from being affected by the animation, and hides any overflowing content. It serves as the base class for creating the striped effect.
59
71
60
72
```html
73
+
61
74
<divclass="stripes">
62
-
<!-- Your content here -->
75
+
<!-- Your content here -->
63
76
</div>
64
77
```
65
78
@@ -70,8 +83,9 @@ The ```.stripes``` class creates a container with relative positioning, isolates
70
83
The ```.stripes-{value}``` class sets the color of the stripes to selected value. You can use it to create any color stripes on your elements.
71
84
72
85
```html
86
+
73
87
<divclass="stripes stripes-rose-500">
74
-
<!-- Your content here -->
88
+
<!-- Your content here -->
75
89
</div>
76
90
77
91
<!-- by color name or arbitrary value -->
@@ -89,8 +103,9 @@ The ```.stripes-{value}``` class sets the color of the stripes to selected value
89
103
The ```.stripes-reverse``` class reverses the direction of the stripes' animation. It creates a cool effect where the stripes appear to move in the opposite direction.
90
104
91
105
```html
106
+
92
107
<divclass="stripes stripes-reverse">
93
-
<!-- Your content here -->
108
+
<!-- Your content here -->
94
109
</div>
95
110
96
111
```
@@ -102,8 +117,9 @@ The ```.stripes-reverse``` class reverses the direction of the stripes' animatio
102
117
The ```.stripes-opacity-{value}``` classes allow you to control the opacity of the stripes. Replace {value} with the desired opacity level. The available values are defined in your Tailwind CSS opacity configuration.
103
118
104
119
```html
120
+
105
121
<divclass="stripes stripes-opacity-50">
106
-
<!-- Your content here -->
122
+
<!-- Your content here -->
107
123
</div>
108
124
109
125
<!-- or by arbitrary value -->
@@ -112,15 +128,17 @@ The ```.stripes-opacity-{value}``` classes allow you to control the opacity of t
112
128
</div>
113
129
114
130
```
131
+
115
132
#### Stripes Size Modifier
116
133
117
134
```.stripes-size-{value}```
118
135
119
136
The ```.stripes-size-{value}``` classes let you adjust the size of the stripes. Replace {value} with one of the custom stripe sizes defined in your Tailwind CSS stripeSizes configuration.
120
137
121
138
```html
139
+
122
140
<divclass="stripes stripes-size-md">
123
-
<!-- Your content here -->
141
+
<!-- Your content here -->
124
142
</div>
125
143
<!-- or by arbitrary size value -->
126
144
<divclass="stripes stripes-size-[42px]">
@@ -129,39 +147,60 @@ The ```.stripes-size-{value}``` classes let you adjust the size of the stripes.
129
147
```
130
148
131
149
## Customization
150
+
132
151
You can customize the plugin by modifying the theme section in your Tailwind CSS configuration file. The plugin allows you to define custom stripe sizes and use them as utility classes.
133
152
134
153
```javascript
135
154
module.exports= {
136
-
theme: {
137
-
extend: {
138
-
stripeSizes: {
139
-
// Define your custom stripe sizes here
140
-
xs:"4px",
141
-
sm:"8px",
142
-
md:"16px",
143
-
lg:"24px",
144
-
xl:"32px",
145
-
"2xl":"40px",
146
-
"3xl":"48px",
147
-
},
155
+
theme: {
156
+
extend: {
157
+
stripeSizes: {
158
+
// Define your custom stripe sizes here
159
+
xs:"4px",
160
+
sm:"8px",
161
+
md:"16px",
162
+
lg:"24px",
163
+
xl:"32px",
164
+
"2xl":"40px",
165
+
"3xl":"48px",
166
+
},
167
+
},
148
168
},
149
-
},
150
-
plugins: [
151
-
// Other plugins...
152
-
stripesPlugin,
153
-
],
169
+
plugins: [
170
+
// Other plugins...
171
+
stripesPlugin,
172
+
],
154
173
};
155
174
156
175
```
157
176
158
177
By adding or modifying the custom stripe sizes, you can use the .stripes-size-{value} utility classes with your defined sizes.
159
178
160
179
## Conclusion
161
-
The Tailwind CSS Stripes Plugin simplifies the process of creating striped backgrounds with utility classes and components. You can easily apply striped patterns to your elements using the provided classes and customize their appearance according to your project's needs. The plugin offers control over colors, sizes, opacity, and animation direction, making it a powerful addition to your Tailwind CSS toolkit.
162
180
181
+
The Tailwind CSS Stripes Plugin simplifies the process of creating striped backgrounds with utility classes and components. You can easily apply striped patterns to your elements using the provided classes and customize their appearance
182
+
according to your project's needs. The plugin offers control over colors, sizes, opacity, and animation direction, making it a powerful addition to your Tailwind CSS toolkit.
183
+
184
+
## Contributing
185
+
186
+
Contributions to this plugin are welcome! If you encounter any issues, have feature requests, or want to improve the plugin, feel free to create a pull request or submit an issue on the GitHub repository.
187
+
188
+
## License
189
+
190
+
This project is licensed under the [MIT](LICENCE) License - see the [LICENSE](LICENCE) file for details.
0 commit comments