├── .gitignore ├── LICENSE ├── README.md ├── index.js └── package.json /.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules 2 | package-lock.json 3 | yarn.lock 4 | npm-debug.log 5 | yarn-error.log 6 | *.log -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 Debangshu Roy 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # tailwindcss-textshadow 2 | A Utility Plugins for controlling Text Shadow of an text element. 3 | 4 | 5 | 6 | | Class | Properties | 7 | |----------|-------------| 8 | | `.text-shadow` | `text-shadow: 0px 0px 1px rgb(0 0 0 / 20%), 0px 0px 1px 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_ 28 | 29 | #### Yarn 30 | 31 | ```sh 32 | yarn add tailwindcss-textshadow --dev 33 | ``` 34 | 35 | #### npm 36 | 37 | ```sh 38 | npm i --save-dev tailwindcss-textshadow 39 | ``` 40 | 41 | #### :heavy_check_mark: import the plugin 42 | 43 | Add the plugin to the `plugins` array in your Tailwind configuration file `(tailwind.config.js)`. 44 | 45 | ```javascript 46 | plugins: [ 47 | require('tailwindcss-textshadow') 48 | ] 49 | ``` 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 | 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 |
72 | 73 |
74 | ``` 75 | 76 | 77 | ## Customizing 78 | 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 86 | 87 | 88 | ```javascript 89 | // tailwind.config.js 90 | module.exports = { 91 | theme: { 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 | } 100 | 101 | ``` 102 | 103 | #### To extend the default 104 | 105 | ```javascript 106 | 107 | // tailwind.config.js 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 | 121 | ``` 122 | 123 | ### Responsive and pseudo-class variants 124 | 125 | By default, only responsive, hover and focus variants are generated for text shadow utilities. 126 | 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 | > Use the name **`textShadow`** under variants object. 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 | } 142 | ``` 143 | 144 | 145 | ## Credits 146 | 147 | - [Adam Wathan](https://github.com/adamwathan) 148 | - [Contributors](https://github.com/iunteq/tailwindcss-textshadow/graphs/contributors) 149 | 150 | > :green_heart: If you :+1: this, then please give a :star:. Thank you. 151 | 152 | ## License 153 | 154 | The MIT License (MIT). Please see [License File](LICENSE) for more information. 155 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | 2 | const _ = require('lodash') 3 | const plugin = require('tailwindcss/plugin') 4 | 5 | module.exports = plugin(function({ addUtilities, e, theme, variants }) { 6 | const textShadow = theme('textShadow', {}) 7 | 8 | const textShadowVariants = variants('textShadow', []) 9 | 10 | const utilities = _.fromPairs( 11 | _.map(textShadow, (value, modifier) => { 12 | const className = modifier === 'default' ? 'text-shadow' : `${e(`text-shadow-${modifier}`)}` 13 | return [ 14 | `.${className}`, 15 | { 16 | 'text-shadow': value, 17 | }, 18 | ] 19 | }) 20 | ) 21 | 22 | addUtilities(utilities, textShadowVariants) 23 | }, 24 | { 25 | theme: { 26 | textShadow: { 27 | default: '0px 0px 1px rgb(0 0 0 / 20%), 0px 0px 1px rgb(1 0 5 / 10%)', 28 | sm: '1px 1px 3px rgb(36 37 47 / 25%)', 29 | md: '0px 1px 2px rgb(30 29 39 / 19%), 1px 2px 4px rgb(54 64 147 / 18%)', 30 | lg: '3px 3px 6px rgb(0 0 0 / 26%), 0 0 5px rgb(15 3 86 / 22%)', 31 | xl: '1px 1px 3px rgb(0 0 0 / 29%), 2px 4px 7px rgb(73 64 125 / 35%)', 32 | none: 'none', 33 | }, 34 | }, 35 | variants: { 36 | textShadow: ['responsive', 'hover', 'focus'], 37 | } 38 | }) 39 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "tailwindcss-textshadow", 3 | "version": "2.1.3", 4 | "description": "A Utility Plugins for controlling Text Shadow of an text element.", 5 | "main": "index.js", 6 | "keywords": [ 7 | "textshadow", 8 | "tailwind", 9 | "tailwindcss", 10 | "tailwindcss-plugin", 11 | "tailwind utility", 12 | "tailwind variants", 13 | "textshadow", 14 | "lodash", 15 | "css", 16 | "javascript" 17 | ], 18 | "author": "Debangshu Roy", 19 | "license": "MIT", 20 | "copyright": "iunteq", 21 | "repository": { 22 | "type": "git", 23 | "url": "git://github.com/iunteq/tailwindcss-textshadow.git" 24 | }, 25 | "publishConfig": { "registry": "https://registry.npmjs.org/" }, 26 | "bugs": { 27 | "url": "https://github.com/iunteq/tailwindcss-textshadow/issues" 28 | }, 29 | "homepage": "https://github.com/iunteq/tailwindcss-textshadow#readme", 30 | "dependencies": { 31 | "lodash": "^4.17.21", 32 | "tailwindcss": "^1.2.0" 33 | } 34 | } 35 | --------------------------------------------------------------------------------