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 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', // co-exist with linaria if you want!
        [
            'next/babel',
            {
                'preset-react': {
                    runtime: 'automatic',
                },
            }
        ],
    ],
    plugins: [],
}

Simple react code

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

React code with template strings

import tw, { cx } from 'twstyled/js'

const mixin = `font-semibold text-3xl`
const style = tw`${mixin} md:text-4xl lg:text-5xl not-italic`

const HeroHeadingAdvanced = (props) => (
  <h1
    className={cx(style)}
    {...props}
  />
)

React and markdown MDX code allows class instead of className for compatibility with example kits

  <h1 class="font-semibold text-3xl md:text-4xl lg:text-5xl not-italic">Hello</h1>

Advanced -- escape hatch to css when required with Linaria (and still zero runtime)

import { css } from '@linaria/css'

const HeroHeadingAdvanced = (props) => (
  <h1
    tw="font-semibold text-3xl md:text-4xl lg:text-5xl not-italic"
    className={css`
      line-height: 1.15;
    `}
    {...props}
  />
)

Advanced -- Bring your own css solution (Linaria, emotion, styled-components)

import tw from 'twstyled/js'
import styled from '@emotion/react'

const HeroHeadingAdvanced = styled.div`
      line-height: 1.15;
      ${tw`font-semibold text-3xl md:text-4xl lg:text-5xl not-italic`}
    `



## License

The MIT License (MIT)