Styling with Tailwind
Getting Started
Styling with Tailwind is straightforward: simply apply your desired classes to the <SocialShare> component.
The component provides a --color-brand CSS variable that contains each network's brand color. You can use this variable in your Tailwind classes:
<SocialShare
network="facebook"
:styled="true"
class="rounded-full bg-transparent text-(--color-brand) border-2 border-(--color-brand)"
/>
Tailwind v4
This module uses a @layer components CSS layer, integrating with Tailwind v4 setup to ensure proper specificity and priority.
Tailwind v4 layers are ordered this way:
-@layer theme, base, components, utilities;
<SocialShare> hooks into this setup, allowing it ot override basic resets from the base layer while still being further customizable by utilities in the utilities layer.
Tailwind v3
Nuxt Social Share v2 is no longer compatible with Tailwind v3 and earlier.
Tailwind v3 used to have a "hacky" non-native CSS layer implementation that conflicts with proper layers usage. This may cause build errors similar to:
[plugin:vite:css] [postcss] /path/to/project/node_modules/@stefanobartoletti/nuxt-social-share/dist/runtime/SocialShare.vue?vue&type=style&index=0&lang.css:2:1: @layer components is used but no matching @tailwind components directive is present.
Unfortunately, the different internal setup of Tailwind v3 and v4 made it impossible to keep compatibility with both versions a the same time. When updating the Nuxt Social Share module, the current v4 version has been prioritized, discarding support for the outdated v3.
Upgrading to Tailwind v4 is the recommended solution
@nuxtjs/tailwindcss module
The Nuxt Tailwind module is still using Tailwind v3 currently, so everything above applies here too.
You can handle this in two ways:
- (Recommended) Remove the Tailwind module and manually upgrade Tailwind to v4. Tailwind v4 has a more streamlined architecture and doesn't require a dedicated module for optimal integration.
- If your setup doesn't allow you to remove the Tailwind module, stay on Nuxt Social Share v1.x until the module will support Tailwind v4 (You can monitor the module's Tailwind v4 compatibility progress)