https://github.com/arlyon/stailwc

Tailwind in SWC, Nextjs, and Vite, fast 🚀
https://github.com/arlyon/stailwc

next nextjs swc swc-plugin tailwind tailwindcss

Last synced: 4 months ago
JSON representation

Tailwind in SWC, Nextjs, and Vite, fast 🚀

• Host: GitHub
• URL: https://github.com/arlyon/stailwc
• Owner: arlyon
• License: apache-2.0
• Created: 2022-08-18T02:38:11.000Z (almost 2 years ago)
• Default Branch: master
• Last Pushed: 2024-02-15T13:15:59.000Z (5 months ago)
• Last Synced: 2024-03-15T15:07:32.010Z (4 months ago)
• Topics: next, nextjs, swc, swc-plugin, tailwind, tailwindcss
• Language: Rust
• Homepage: https://npmjs.com/package/stailwc
• Size: 1.27 MB
• Stars: 224
• Watchers: 9
• Forks: 5
• Open Issues: 13
• Metadata Files:
  • Readme: readme.md
  • Changelog: CHANGELOG.md
  • Contributing: contributing.md
  • License: LICENSE-APACHE

Lists

• awesome-stars - stailwc

README

        
# stailwc (speedy tailwind compiler)

This is an experimental SWC transpiler to bring compile time

tailwind macros to SWC (and nextjs) a-la twin macro. The goal

is to give the same great compile-time ergonomics and flexibility

while performing considerably better than babel-based alternatives.

Supports both `emotion` and `styled-components` for CSS-in-JS, and

many build systems such as SWC, nextjs, Vite, etc.

## Compatibility Chart

We are currently testing against the following versions. Other versions outside these may still work, however.

| stailwc | NextJS | Emotion | Styled Components | swc    | Vite  |

| ------- | ------ | ------- | ----------------- | ------ | ----- |

| latest  | 13.4.3 | 11.10.5 | 5.3.6             | 1.3.24 | 4.1.0 |

## Feature Chart

| Feature                         | Emotion | Styled Components |

| ------------------------------- | ------- | ----------------- |

| `tw` jsx attribute              | ✅      | ✅                |

| `tw` template tag               | ✅      | ✅                |

| `tw` component syntax           | ✅      | ✅                |

| `tw` component extension syntax | ✅      | ✅                |

| Global styles                   | ✅      | ✅                |

| Plugin parameter suggestions    | ✅      | ✅                |

## Getting started

```bash

> npm add -D stailwc

> yarn add -D stailwc

> pnpm add -D stailwc

```

To get started with NextJS, place the following in your next.config.js.

For other framworks / tools, please see the examples.

`next.config.js`

```js

const stailwc = require("stailwc/install");

/** @type {import('next').NextConfig} */

const nextConfig = {

  reactStrictMode: true,

  swcMinify: true,

  experimental: {

    swcPlugins: [

      stailwc({

        engine: "emotion", // or "styled-components"

      }),

    ],

  },

  compiler: {

    emotion: true,

    // or

    styledComponents: true,

  },

};

module.exports = nextConfig;

```

Optionally, you can also include the tailwind normalizer + forms

plugin by including the `` component. Please see

the relevant examples.

`_document.tsx`

```tsx

import { TailwindStyle } from "stailwc";

export default function App({ Component, pageProps }) {

  return (

    <>

      

      

    >

  );

}

```

### Types

There is one step you need to take to get types working. You need to add `stailwc.d.ts` to the root of your source

folder.

## Usage

### The `tw` tag

You can interact with stailwc in two ways. The first is through

the `tw` JSW attribute, and the second is via the `tw` template

tag.

```tsx

import { useState } from "react";

export const ColorButton = () => {

  const [clicked, setClicked] = useState(0);

  return (

     setClicked(clicked + 1)}

    >

      Clicked {clicked} times

    

  );

};

```

### Component syntax

You can also create styled components using the `tw` template tag.

This will automatically create the correct syntax for both `emotion`

and `styled-components`.

```tsx

export const StyledButton = tw.button`p-1 m-4 text-green bg-white hover:(bg-gray text-yellow md:text-red) border-3`;

export const ShadowButton = tw(StyledButton)`shadow-lg`;

```

## Examples

There are examples available for both `emotion` and `styled-components`.

You can run them by cloning the repo and running `yarn` followed by

`yarn dev` in the example directory. You will need to `stailwc` first.