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)