In the last blog post, we had a run-through of best practices for Tailwind CSS. Windi CSS is another fantastic utility-based CSS that our software engineers use in internal & external applications. While there are multiple tech stacks that Windi is compatible with, we use Nuxt in almost all of our projects.
At OLA Campus Pune we use multiple latest technologies to fulfill our technical requirements.
In this particular blog post we will cover:
- What is Nuxt JS?
- Why Nuxt ?
- What is Windi CSS?
- How to integrate Windi CSS with Nuxt JS
- Migration from Tailwind CSS
What is Nuxt JS?
Nuxt is an open-source framework inspired by NextJS. It is based on Vue.js, Node.js, Webpack and Babel JS. Nuxt uses Vue.js as a view engine. Before you start with Nuxt JS, here are some prerequisites required for using Nuxt on your local environment
- Have NodeJS installed
- A Text Editor like VS Code/ Webstorm
- Integrated Terminal
Well, there are multiple ways to start with a Vue Project. The code snippet below can be used to begin with a Vue Project.
npx create-nuxt-app <project-name>
Now since you have the Nuxt Project setup let us have a look how we can integrate Windi with Nuxt JS.
Why Nuxt JS?
There can be many reasons why one should use Nuxt JS? But here top three reasons:
Creating Universal application is a lot easier:-
Universal Applications can be rendered on both the client and server sides. They have a single code base and are highly reusable or maintainable as it is not required to duplicate and build code for different platforms.
Nuxt JS supports and makes making universal applications a lot easier. It gives you access to properties like isClient and isServer, making it easier to control rendering for components.
Automatic code splitting
While generating routes, A separate build file is generated for each route and page, due to which only components on the current page are loaded.
This results in faster page loads.
Easy setup using the command-line
Working within the deadlines is really important when you are building applications that will revolutionize the mobility sector of the world's largest democracy.
Thus we require a faster setup, and Nuxt JS is the perfect candidate to solve this problem. As it can be easily set up for use within minutes.
What is Windi CSS?
Windi CSS is a next-generation utility-first CSS framework. Similar to Tailwind, it is also known for easy-to-use on-demand CSS classes. Windi CSS provides faster load times, full compatibility with Tailwind v2.0, and a bunch of additional cool features.
It also supports basic tailwind configuration, so it's pretty easy when you try to migrate Tailwind to Windi CSS.
While Windi & Tailwind CSS are very similar in terms of technicalities, it is very easy to adapt the other utility-based CSS if you use any of them. The unique thing about Windi CSS is that you can use tailwind CSS classes in WindiCSS. Winds are built with typescript, so it is easy to debug and compile.
How to integrate Windi CSS with Nuxt?
These code snippets will help you setup Windi CSS for Nuxt JS
Install Windi via command Line
You can use yarn or Npm, whichever suits your needs; here are the code snippets for both:
yarn add nuxt-windicss -D
For NPM
npm i nuxt-windicss -D
It would take a couple of moments to get installed. Follow the next steps once the installation is complete.
Add Configuration
Within your nuxt.config.js add the following:
For Nuxt 2:
export default {
buildModules: [
'nuxt-windicss',
],
}
As build modules are no longer needed in Nuxt 3, use the below code snippets if you are using Nuxt 3.
For Nuxt 3:
import { defineNuxtConfig } from 'nuxt3'
export default defineNuxtConfig({
modules: [
'nuxt-windicss',
],
})
And you’re ready to use Windi with your Nuxt application. Note that if you’re migrating from Tailwind CSS. Make sure you follow the below steps:
Migration from Tailwind CSS
Dependencies
Following dependencies can be removed as they are no longer needed for the application
- "tailwindcss": "*",
- "postcss": "*",
- "autoprefixer": "*",
+ "windicss": "*"
CSS Imports
Similarly You can now remove the Tailwind CSS imports from your CSS entry.
- @import 'tailwindcss/base';
- @import 'tailwindcss/components';
- @import 'tailwindcss/utilities';
There are a lot of other optional steps you can perform, please refer to the official documentation.
Wrapping up
We had a turnaround with essentials about Windi and Nuxt. The top three reasons why Nuxt should be used:
- Creating a Universal application is a lot easier
- Automatic code splitting
- Easy setup using the command-line
We were also able to integrate Windi CSS with Nuxt Application following just a couple of steps:
- Install Windi via Command Line
- Add Configuration
And an easy migration from Tailwind to Windi.
OLA Campus Pune uses the latest libraries and SDKs to create the best user experience. Windi and Tailwind are some examples of the technologies we use in our daily working.
We look forward to sharing more of our workflows in the coming days. If you have some feedback or have found this blog post of your interest, do connect with us!
Top comments (0)