uniwind-plugin-next
v1.2.0
Published
Compatibility plugin for using Uniwind with Next.js
Readme
uniwind-plugin-next
This is an unofficial plugin, and is not affiliated with Uniwind or Next.js.
Uniwind config plugin for Next.js. Note that only Webpack-based projects are supported, there are no plans to support Turbopack-based projects.
Example
See a fully working example project here: Demo (Source)
Compatibility
See the table below for tested versions of uniwind-plugin-next and corresponding versions of uniwind. Other versions of uniwind may work, but are not guaranteed to.
Tested on Next 16.1, but other versions will likely work fine.
| uniwind-plugin-next | Uniwind |
|---------------------|---------|
| 1.1.x | 1.2.2 |
| 1.2.x | 1.2.2 |
Installation & setup
This setup guide assumes you already have a next.js project setup with Tailwind v4
- Install uniwind and this plugin. You will probably also need
@expo/next-adapterif you don't already have it, to handle react-native web support.
pnpm install uniwind uniwind-plugin-next @expo/next-adapter- Wrap next.js config with
withUniwind()
// next.config.ts
import type { NextConfig } from "next";
import { withExpo } from "@expo/next-adapter";
import { withUniwind } from 'uniwind-plugin-next'
const nextConfig: NextConfig = {
transpilePackages: ['react-native', 'react-native-web'],
};
// Wrap your config with `withUniwind()`
export default withUniwind(withExpo(nextConfig), {
cssEntryFile: './app/globals.css',
// Takes the same options as the vite & metro plugins.
// See https://docs.uniwind.dev/api/metro-config#configuration-options
});- Add the postcss plugin
const config = {
plugins: {
'uniwind-plugin-next/postcss': {}, // Add this line
'@tailwindcss/postcss': {},
},
};
- Add
@import 'uniwind';to the global CSS file (or wherever you@import 'tailwindcss')
/* src/app/globals.css */
@import 'tailwindcss';
@import 'uniwind';- Add
suppressHydrationWarningto root<html>tag (inapp/layout.tsxby default)
// src/app/layout.tsx
...
return (
<html lang="en" suppressHydrationWarning>
...
</html>
);- Start the dev server to generate
uniwind-types.d.ts. Make sure that it's included in yourtsconfig.json'sincludearray.
SSR Considerations
This plugin marks all Uniwind web components with
'use client'automatically, so you do not need to do this manually.Be aware that some Uniwind features, such as
withUniwindanduseResolveClassNameswill not work in a server environment, as they rely on accessingwindowordocument.Additional code is required to avoid a flash of unstyled content (FOUC). See the example project for reference.