Skip to content

v2.1.1

Compare
Choose a tag to compare
@roydebangshu roydebangshu released this 24 Jul 22:48
· 6 commits to master since this release

Just follow these two steps and use it!

Yarn

yarn add tailwindcss-textshadow --dev

npm

npm i --save-dev tailwindcss-textshadow

✔️ import the plugin

Add the plugin to the plugins array in your Tailwind configuration file (tailwind.config.js). #2

plugins: [
  require('tailwindcss-textshadow')  
]

These are the default values

Class Properties
.text-shadow text-shadow: 1px 0px 0px rgb(0 0 0 / 20%), 0px 1px 0px rgb(1 0 5 / 10%);
.text-shadow-sm text-shadow: 1px 1px 3px rgb(36 37 47 / 25%);
.text-shadow-md text-shadow: 0px 1px 2px rgb(30 29 39 / 19%), 1px 2px 4px rgb(54 64 147 / 18%)
.text-shadow-lg text-shadow: 3px 3px 6px rgb(0 0 0 / 26%), 0 0 5px rgb(15 3 86 / 22%)
.text-shadow-xl text-shadow: 1px 1px 3px rgb(0 0 0 / 29%), 2px 4px 7px rgb(73 64 125 / 35%)
.text-shadow-none text-shadow: none

By default, only responsive, hover and focus variants are generated for text shadow utilities.

💡 Features

Minimal Set-up.

Ready to use out of the box.

Has default preset shadows with variants.

Users will be able to override and extend defaults the same way they can with Tailwind's built-in styles.