How to install Windi CSS in nextjs?

Nextjs + Windicss

How to install Windi CSS in nextjs?

The Windi CSS is a fantastic alternative to Tailwind CSS.

Windi CSS is similar to tailwind CSS. Therefore, you can use the same tailwind class with windi CSS. The main difference is tailwind CSS, built with postcss, and windi CSS, built with typescript.

According to the Windi css creator, tailwind css has inspired me to make windi css. You can read more about windi css and the motivation story behind the windi css by windicss creator.

You can quickly shift tailwind css to windi css, but In this article, we create a brand-new setup for windi CSS with nextjs. Nextjs is a framework based on reactjs with lots of functionality that enhance the react.js developer experience.

Demo

All the code is available on GitHub and demo.

Steps

1. Create the nextjs app
2. Install the windi css
3. Install webpack plugin for windi css
4. Add the config for windi CSS

Create the nextjs app

The first step is to need a nextjs app. To create a nextjs, we run the following command in the terminal. But make sure you have already installed npm or yarn. In this article, I used pnpm. PNPM is similar to npm and yarm package manage, but the critical difference is that pnpm is faster than npm and yarn.

npx create-next-app@latest

# or

yarn create next-app

# or

pnpm create next-app

Suppose you have already created an application with next.js. Then skip the first step.

Install the windi css

The first step is to install the windi css node package from the npm repository. After that, you can install it with npm, yarn, or pnpm. For example, I used PNPM to install the windicss package in my nextjs project.

npm install windicss

# or

yarn add windicss

# or

pnpm add  windicss

Install Windi css with pnpm

Install webpack plugin for windi css

Windi CSS provides a webpack plugin that helps to install windi css in nextjs.

npm install windicss-webpack-plugin

# or

yarn add windicss-webpack-plugin

# or

pnpm add  windicss-webpack-plugin

Webpack plugin for windi css

Add the config for windi CSS

The nextjs step after installation finishes the windicss-webpack-plugin. Now you need the Config windi CSS in nextjs.

Firstly replay your next.config.js file code with the following code.

// next.config.js

/** @type {import('next').NextConfig} */

const WindiCSSWebpackPlugin = require('windicss-webpack-plugin')


module.exports = {

  webpack(config) {
    config.plugins.push(new WindiCSSWebpackPlugin())
    return config
  }
  
}

The second step is to create a windi.config.js file on the project root level and paste the following code into windi.config.js file.

// windi.config.js
import { defineConfig } from 'windicss/helpers'

export default defineConfig({
  extract: {
    include: ["./pages/**/*.{js,ts,jsx,tsx}","./components/**/*.{js,ts,jsx,tsx}"],
    exclude: ['node_modules', '.git', '.next'],
  },
})

Import the windi CSS file in _app.js and start the use of windi CSS in nextjs.

import 'windi.css'

import type { AppProps } from 'next/app'

export default function App({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />
}

How to test the windicss?

To test whether the windi CSS is working or not with nextjs. paste the following code into index.jsx or index.tsx file.

export default function index() {
    return (
        <header className="text-blue-800 body-font ">
            <div className="container mx-auto flex flex-wrap p-5 flex-col md:flex-row items-center ">
                <a className="flex title-font font-medium items-center mb-4 md:mb-0">
                    <span className="ml-3 text-xl"> Windicss + Nextjs</span>
                </a>
                <nav className="md:ml-auto flex flex-wrap items-center text-base justify-center">
                    <a className="mr-5 text-blue-800 hover:text-gray-900">Home</a>
                    <a className="mr-5 hover:text-gray-900">Blog</a>
                    <a className="mr-5 hover:text-gray-900">About us</a>
                    <a className="mr-5 hover:text-gray-900">Contact us</a>
                </nav>
                <button className="inline-flex items-center bg-gray-100 border-0 py-1 px-3 focus:outline-none hover:bg-gray-200 rounded text-base mt-4 md:mt-0">Button
                    <svg fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" className="w-4 h-4 ml-1" viewBox="0 0 24 24">
                        <path d="M5 12h14M12 5l7 7-7 7"></path>
                    </svg>
                </button>
            </div>
        </header>
    )
}

You see a beautiful header on your screen—designed with windi css.

Design the header with windi css in nextjs

Note

Suppose anything does not see on the website. Edit any class or change the header layout, then save the file. It works fine. If you copy and paste HTML in windicss, you need some changes to windi CSS to detect and add to the CSS file.

FAQ

Windi css supports the tailwind css class?

Yes, windi css uses the same class hierarchy system as tailwind css uses it. That mean tailwind css and windi css use the same class to design the website.

Does Windi CSS have plugins like a tailwind css?

Yes, Windi css has the same plugin as the tailwind css and the same class.

Conclusion

Windi CSS has great potential to solve those problems that tailwind CSS does not solve; for example, with tailwind CSS, you can't change or add a tailwind class using the dev tool.

You can share and follow us on Twitter and Linkedin. If you like my work, please read more content on the officialrajdeepsingh. dev, Nextjs, frontend web, and Sign up for a free newsletter.