@twstyled/babel-plugin-tw

twstyled

Usage no npm install needed!

<script type="module">
  import twstyledBabelPluginTw from 'https://cdn.skypack.dev/@twstyled/babel-plugin-tw';
</script>

README

Tailwind CSS for Next.js with Zero Runtime and no Post-CSS

Adds Tailwind to built-in CSS support in Next.js.

Requires Next.js 10 or above with Webpack 5.0 or above.

Differences from alternatives

This plugin includes a custom babel preset that wraps the excellent xwind core utilities in such a manner that no webpack loader is required, and adds custom tw= attributes to JSX in React. Even html "class=" attributes with Tailwind syntax will work, for easy cut and pasting Tailwind code from design kits.

The standard xwind solution and most other similar Next.js plugins use a custom webpack loader that adds extra processing time to every build, whereas keeping all logic in Babel means that the build features in parallel.

Features

[x] Wraps the lower level @xwind/core and @xwind/class-utilities [x] Has no depenndency on xwind package [x] Splits Babel plugin into separate package @twstyled/babel-plugin-tw [x] Writes all generated css to twstyled.global.css directly from Babel with no webpack overhead [x] Babel plugin contains no Next.js specific code and can be re-used in any module bundler [x] Default to string classes with zero config required [x] Support CSS-IN-JS object mode with import tw from 'twstyled/js'

Installation

npm install --save twstyled @twstyled/next @twstyled/babel-preset 

or

yarn add twstyled @twstyled/next @twstyled/babel-preset 

Usage

Create a babel.config.js in your project

// babel.config.js
"use strict";

module.exports = {
    presets: [
        '@twstyled/babel-preset',
        [
            'next/babel',
            {
                'preset-react': {
                    runtime: 'automatic',
                },
            }
        ],
    ],
    plugins: [],
}
// HeroHeading.jsx

export const HeroHeading = (props) => (
  <h1
    tw="font-semibold text-3xl md:text-4xl lg:text-5xl not-italic"
    {...props}
  />
)

License

The MIT License (MIT)