The latest articles on DEV Community by ⚡ Sigui (@siguici). https://dev.to/siguici https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1423463%2Fca858338-f6ce-45d1-9449-f24ed655d6d9.jpg https://dev.to/siguici en ⚡ Sigui Mon, 21 Oct 2024 04:26:12 +0000 https://dev.to/siguici/supercharge-your-tailwindcss-plugin-development-with-plugwindjs-1n0m https://dev.to/siguici/supercharge-your-tailwindcss-plugin-development-with-plugwindjs-1n0m <p>If you’ve ever developed plugins for TailwindCSS, you know how powerful the plugin system is… but also how it can get a bit cumbersome at times. 🎨</p> <p>Enter <code>plugwind.js</code>, a lightweight package that extends Tailwind's plugin API with must-have features to make your life easier.</p> <h2> Why use Plugwind.js? </h2> <ul> <li>🌑 Simplified dark mode support : Switch it on with ease.</li> <li>🎨 Background gradients : Effortlessly manage and apply gradients.</li> <li>📦 More flexible API : Extend Tailwind faster and more efficiently.</li> </ul> <p>All this with just a few lines of code!</p> <h2> How to install it? </h2> <div class="highlight js-code-highlight"> <pre class="highlight shell"><code>npm <span class="nb">install </span>plugwind.js </code></pre> </div> <p>Or find it on <a href="//https//jsr.io/@siguici/plugwind">JSR</a> and <a href="https://github.com/siguici/plugwind" rel="noopener noreferrer">GitHub</a>.</p> <h2> Example usage </h2> <div class="highlight js-code-highlight"> <pre class="highlight typescript"><code><span class="k">import</span> <span class="nx">plug</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">plugwind.js</span><span class="dl">'</span><span class="p">;</span> <span class="k">export</span> <span class="k">default</span> <span class="nf">plug</span><span class="p">(({</span> <span class="nx">addProperty</span> <span class="p">})</span> <span class="o">=&gt;</span> <span class="p">{</span> <span class="nf">addProperty</span><span class="p">(</span><span class="dl">'</span><span class="s1">background</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">radial-gradient(circle, var(--tw-gradient-stops))</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">.bg-gradient-radial</span><span class="dl">'</span><span class="p">)</span> <span class="p">});</span> </code></pre> </div> <p>Plugwind.js is an evolving project, so feedback and contributions are highly appreciated!</p> <p>Give it a try and let me know what you think 🚀</p> <h1> tailwindcss #npm #pluginDev #javascript #opensource </h1>