Adding Tailwind CSS Plugin

[hakimLyon]

I propose adding the Tailwind CSS Plugin package. This package allows us to extend the functionalities of Tailwind CSS by adding custom styles using JavaScript, providing greater flexibility in customizing our styles.

By integrating this package into our project, we will benefit from the following advantages:

• Advanced customization of styles.
• Modularity for easy addition/removal of custom features.
• Seamless integration with our existing Tailwind CSS configuration.

To implement this, details can be found in the official Tailwind CSS Plugin documentation

Example

...
plugins: [
plugin(({ theme, addUtilities }) => {
      const epicUtilities = {}
      const colors = theme('colors')
      for(const color in colors) {
         if ( typeof colors[color] === 'object') {
             const color1 = colors[color]['500']
             const color2 = colors[color]['700']
             epicUtilities[`.epic-shadow-${color}`] = { 
            boxShadow: `0 0 5px ${color1}, 0 0 20px ${color2}`, 
          }
      }
    }
 addUtilities(epicUtilities)
})
]

className="epic-shadow-green"

[kentcdodds]

Interesting. I'd be interested in seeing an example of this. Would you like to make one? Learn how here: https://github.com/epicweb-dev/epic-stack/blob/main/docs/examples.md

[hakimLyon]

Sure, you can find it in this GitHub repository: Epic Stack with Tailwind CSS Plugin.

[kentcdodds]

That looks great! I don't think I want to build it into the epic stack just yet, but if you'd like to make a PR to add it to the examples docs then I'd happily merge that!

[hakimLyon]

That's great! Here is the PR.