Skip to content

Commit 94c505e

Browse files
roydebangshuroydebangshu
committed
Change in readme file.
1 parent 04fb233 commit 94c505e

File tree

1 file changed

+107
-35
lines changed

1 file changed

+107
-35
lines changed

‎README.md

Lines changed: 107 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,44 @@
11
# tailwindcss-textShadow
2-
A Utility Plugins for Text Shadow like Tailwindcss default boxshadow with theme and variants option.
2+
A Utility Plugins for controlling Text Shadow of an element.
33

44

5-
## Installation
5+
6+
| Class | Properties |
7+
|----------|-------------|
8+
| `.text-shadow` | `text-shadow: 1px 0px 0px rgb(0 0 0 / 20%), 0px 1px 0px rgb(1 0 5 / 10%);` |
9+
| `.text-shadow-sm` | `text-shadow: 1px 1px 3px rgb(36 37 47 / 25%);`|
10+
| `.text-shadow-md` | `text-shadow: 0px 1px 2px rgb(30 29 39 / 19%), 1px 2px 4px rgb(54 64 147 / 18%)`|
11+
| `.text-shadow-lg` | `text-shadow: 3px 3px 6px rgb(0 0 0 / 26%), 0 0 5px rgb(15 3 86 / 22%)`|
12+
| `.text-shadow-xl` | `text-shadow: 1px 1px 3px rgb(0 0 0 / 29%), 2px 4px 7px rgb(73 64 125 / 35%)`|
13+
| `.text-shadow-none` | `text-shadow: none`|
14+
15+
16+
17+
## :bulb: Features
18+
> Minimal Set-up.
19+
20+
> Ready to use out of the box.
21+
22+
> Has default preset shadows with variants.
23+
24+
> Users will be able to **`override`** and **`extend`** defaults the same way they can with Tailwind's built-in styles.
25+
26+
27+
## Installation & changes in _tailwind.config.js_
628

729
#### Yarn
8-
```
30+
31+
```sh
932
yarn add tailwindcss-textshadow --dev
1033
```
34+
1135
#### npm
12-
```
36+
37+
```sh
1338
npm i --save-dev tailwindcss-textshadow
1439
```
15-
## Add following changes in tailwind.config.js
1640

17-
#### import the plugin
41+
#### :heavy_check_mark: import the plugin
1842

1943
Add the plugin to the `plugins` array in your Tailwind configuration file `(tailwind.config.js)`.
2044

@@ -23,59 +47,107 @@ plugins: [
2347
require('tailwindcss-textShadow')
2448
]
2549
```
50+
> :beer: **Congratulations! You are ready to use `text-shadow` in your project.**
51+
52+
53+
54+
## How to use
55+
56+
#### No text shadow
57+
58+
Use `.text-shadow-none` to remove an existing text shadow from an element. This is most commonly used to remove a shadow that was applied at a smaller breakpoint.
59+
60+
```html
61+
<span class="text-shadow-none"></span>
62+
```
63+
64+
#### Responsive
65+
66+
To control the textshadow of an text element at a specific breakpoint, add a `{screen}:` prefix to any existing _text shadow utility_. For example, use `xl:text-shadow-lg` to apply the `text-shadow-lg` utility at only large screen sizes and above.
67+
68+
For more information about Tailwind's responsive design features, check out the [Responsive Design](https://tailwindcss.com/docs/responsive-design) documentation.
69+
70+
```html
71+
<div class="text-shadow sm:text-shadow-sm md:text-shadow-md lg:text-shadow-lg xl:text-shadow-xl ...">
72+
<!-- ... -->
73+
</div>
74+
```
75+
2676

27-
#### Set your own text shadow
77+
## Customizing
2878

29-
You can change, add, or remove `textShadow` property by editing the `theme.textShadow section` of your Tailwind config.
79+
### Text Shadow
80+
81+
By default this plugin provides drop text shadow utilities with five modifires, and a utility for removing existing text shadows. You can change, add, or remove these by editing the `theme.textShadow` section of your Tailwind config.
82+
83+
If a `default` text shadow is provided, it will be used for the *non-suffixed* `.text-shadow` utility. Any other keys will be used as suffixes, for example the key `'2xl'` will create a corresponding `.text-shadow-2xl` utility.
84+
85+
#### To override the default
3086

31-
If a default shadow is provided, it will be used for the non-suffixed `.text-shadow` utility. Any other keys will be used as suffixes, for example the key '2' will create a corresponding `.text-shadow-2` utility.
3287

3388
```javascript
3489
// tailwind.config.js
3590
module.exports = {
3691
theme: {
37-
textShadow: {
38-
default: '0 2px 0 #000',
39-
md: '0 2px 2px #000',
40-
h1: '0 0 3px #FF0000, 0 0 5px #0000FF',
41-
xl: '0 0 3px rgba(0, 0, 0, .8), 0 0 5px rgba(0, 0, 0, .9)',
42-
none: 'none',
43-
}
44-
}
45-
}
92+
textShadow: {
93+
default: '0 2px 0 #000',
94+
md: '0 2px 2px #000',
95+
h2: '0 0 3px #FF0000, 0 0 5px #0000FF',
96+
h1: '0 0 3px rgba(0, 0, 0, .8), 0 0 5px rgba(0, 0, 0, .9)',
97+
}
98+
}
99+
}
46100

47101
```
48102

49-
50-
#### Set Variants in Tailwind Config file
51-
52-
Can use [Tailwind's own variants](https://tailwindcss.com/docs/state-variants/) under the variant name `textShadow`.
103+
#### To extend the default
53104

54105
```javascript
106+
55107
// tailwind.config.js
56-
variants: {
57-
//...
58-
textShadow: ['responsive', 'hover'],
59-
//...
60-
},
108+
module.exports = {
109+
theme: {
110+
// ...
111+
extend: {
112+
// ...
113+
textShadow: {
114+
'2xl': '1px 1px 5px rgb(33 34 43 / 20%)',
115+
'3xl': '0 0 3px rgba(0, 0, 0, .8), 0 0 5px rgba(0, 0, 0, .9)',
116+
},
117+
},
118+
},
119+
}
120+
61121
```
62122

63-
## How to use
123+
### Responsive and pseudo-class variants
64124

65-
#### Responsive
66-
To control the textshadow of an text element at a specific breakpoint, add a {screen}: prefix to any existing textShadow utility. For example, use md:text-shadow-h1 to apply the text-shadow-h1 utility at only medium screen sizes and above.
125+
By default, only responsive, hover and focus variants are generated for text shadow utilities.
67126

68-
```html
69-
<div class="text-shadow sm:text-shadow-md md:text-shadow-h1 lg:text-shadow-xl xl:text-shadow-2xl ...">
70-
<!-- ... -->
71-
</div>
127+
You can control which variants are generated for the text shadow utilities by modifying the **`textShadow`** property in the variants section of your tailwind.config.js file.
128+
129+
For example, this config will also generate active and group-hover variants:
130+
131+
> The variant name is **`textShadow`**.
132+
133+
```javascript
134+
// tailwind.config.js
135+
module.exports = {
136+
variants: {
137+
// ...
138+
- textShadow: ['responsive', 'hover', 'focus'],
139+
+ textShadow: ['responsive', 'hover', 'focus', 'active', 'group-hover'],
140+
}
141+
}
72142
```
73143

144+
74145
## Credits
75146

76147
- [Adam Wathan](https://github.com/adamwathan)
77-
- [plugin-examples](https://github.com/tailwindcss/plugin-examples)
148+
- [Contributors](https://github.com/iunteq/tailwindcss-textShadow/graphs/contributors)
78149

150+
> :green_heart: If you :+1: this, then please give a :star:. Thank you.
79151
80152
## License
81153

0 commit comments

Comments
 (0)