@adeira/babel-plugin-transform-sx-tailwind

Transformation of SX Tailwind helpers into direct SX calls.

This has a positive impact on the final bundle size because the huge Tailwind definitions file can be omitted.

How does it work

import React from 'react';
+ import sx from '@adeira/sx';

export default function Example() {
  return (
    <button
-      sxt="bg-blue-500 text-white font-bold"
+      className={__styles('bg-blue-500', 'text-white', 'font-bold')}
      type="button"
    >
      Button
    </button>
  );
}

+ const __styles = sx.create({
+   'bg-blue-500': {
+     backgroundColor: '#4299e1',
+   },
+   'text-white': {
+     color: '#fff',
+   },
+   'font-bold': {
+     fontWeight: 700,
+   },
+ });

Install

yarn add --dev @adeira/babel-plugin-transform-sx-tailwind

Register in your Babel config (e.g. .babelrc):

{
  "plugins": ["@adeira/babel-plugin-transform-sx-tailwind"]
}