Extending Tailwind in Twin.Macro

[redbaron76]

Hello there, I'm trying to extend Tailwind's CSS classes in order to add snap functionalities to TW.
Normally I would add this snippet to utilities using the @layer directive:

@layer utilities {
  .snap {
    scroll-snap-type: var(--scroll-snap-direction) var(--scroll-snap-constraint);
  }
  .snap-y {
    --scroll-snap-direction: y;
  }
  .snap-mandatory {
    --scroll-snap-constraint: mandatory;
  }
  .snap-start {
    scroll-snap-align: start;
  }
}

But I have no idea how to achieve the same thing in Twin.Macro.
Any tip for this? Thanks.

[ben-rogerson]

There's a few ways you could add this (not in order):

1. Add the classes in a global provider
   The global provider can be imported from your css-in-js library. `className="..." is used to add the styles to JSX elements
2. Convert the styles to variables and import them into your components, eg:
   

   const snapCss = tw`scroll-snap-type[var(--scroll-snap-direction) var(--scroll-snap-constraint)]`
   
   const Component = styled.div([
       snapCss,
       tw`block ...`
   ])

3. Convert the classes to a tailwind plugin:

   function snapPlugin({ addComponents }) {
     const classes = {
       ".snap": {
         "scrollSnapType": "var(--scroll-snap-direction) var(--scroll-snap-constraint)",
       },
       // ...
     };
     addComponents(classes);
   }
   
   // tailwind.config.js
   module.exports = {
     plugins: [snapPlugin],
   };
   
   // Usage
   const Component = tw.div`snap`

[redbaron76]

Thanks a lot!
This is exactly what I was looking for.

[jmichel17]

Should this extension be necessary now? According to the tailwind docs (https://tailwindcss.com/docs/scroll-snap-type), scroll-related properties are built into tailwind.

However, when I attempt to use, for example, snap-y I get a build error like:

MacroError: snap-y was not found

Seems like none of the snap classes are usable in twin.macro

[ben-rogerson]

Snap utilities are part of tailwindcss@v3 which twin is currently catching up on.
Follow along with the issue to stay up to date.

[jmichel17]

thanks, I am new here. Appreciate your response.