Nuxt Windicss

screenshot of Nuxt Windicss
vite

Windi CSS for Nuxt

Overview

Nuxt-windicss is a CSS utility library that is compatible with Tailwind CSS v2. It allows for on-demand CSS utilities and native element style resetting. It also supports utility groups and is integrated with windicss-analysis. The library is designed to work with Nuxt v3, Nuxt v2, @nuxt/vite, and @nuxt/content.

Features

  • On-demand CSS utilities (Compatible with Tailwind CSS v2) and native elements style resetting
  • Use directives in any CSS lang @apply, @variants, @screen, @layer, theme() (Note: Vite / Nuxt v3 has limited support)
  • Support Utility Groups - e.g. bg-gray-200 hover:(bg-gray-100 text-red-300)
  • Plays nicely with Nuxt v3, Nuxt v2, @nuxt/vite and @nuxt/content
  • Integrated with windicss-analysis

Summary

Nuxt-windicss is a CSS utility library that provides on-demand CSS utilities, support for utility groups, and integration with windicss-analysis. It is compatible with Tailwind CSS v2 and can be used with Nuxt v3, Nuxt v2, @nuxt/vite, and @nuxt/content. The library also offers features such as Windi Design in Chrome DevTools and Windi Analyzer for browsing utilities usages and identifying "bad practices".

vite
Vite

Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects

eslint
Eslint

ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.