@jill64/tailwind-reactions

🌀 UI effect set for Tailwind CSS

Demo

Setup

1// tailwind.config.js
2module.exports = {
3  theme: {
4    // ...
5  },
6  plugins: [
7    require('@jill64/tailwind-reactions')
8    // ...
9  ]
10}

Usage

1<button class="pop-effect bg-blue-500 text-white px-4 py-2 rounded-full">
2  pop-effect
3</button>
4
5<input type="text" class="focus-under border-zinc-400 focus:border-blue-600" />
6<input
7  type="text"
8  class="focus-under-2 border-zinc-400 focus:border-blue-600"
9/>
10<input
11  type="text"
12  class="focus-under-bold border-zinc-400 focus:border-blue-600"
13/>
14<input
15  type="text"
16  class="focus-under-bold-2 border-zinc-400 focus:border-blue-600"
17/>

Additional Configuration

You can configure which values are available for this plugin under the focusUnderWidth key in your tailwind.config.js file:

1// tailwind.config.js
2module.exports = {
3  theme: {
4    extend: {
5      focusUnderWidth: {
6        5: '5'
7        6: '6'
8        7: '7'
9      }
10    }
11  }
12}

Alternatively, you can use square bracket notation.

Name	CSS
focus-under-[n]	border-bottom: [n]px
focus-under-bold-[n]	border-bottom: [n]px

License

MIT