@twstyled/babel-plugin v2.0.4

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 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/babel-plugin

or

yarn add twstyled @twstyled/babel-plugin

Usage

Create a babel.config.js in your project

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

module.exports = {
    presets: [
        '@twstyled/next/preset', // co-exist with linaria if you want!
        [
            'next/babel',
            {
                'preset-react': {
                    runtime: 'automatic',
                },
            }
        ],
    ],
    plugins: ['@twstyled/babel-plugin'],
}

// 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)