Code Monkey home page Code Monkey logo

nuxt-windicss's Introduction

nuxt-windicss

nuxt-windicss

Windi CSS for Nuxt.js! โšก๏ธ
Next generation utility-first CSS framework.

Features

  • ๐Ÿงฉ On-demand CSS utilities (Compatible with Tailwind CSS v2) and native elements style resetting
  • ๐Ÿ“„ Use directives in any CSS (SCSS, LESS, etc) @apply, @variants, @screen, @layer, theme(),
  • ๐ŸŽณ 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

Install

yarn add nuxt-windicss -D
# npm i nuxt-windicss -D

Usage

Within your nuxt.config.js add the following.

// nuxt.config.js
export default {
  buildModules: [
    'nuxt-windicss',
  ],
}

Nuxt 3

import { defineNuxtConfig } from 'nuxt3'

export default defineNuxtConfig({
  buildModules: [
    'nuxt-windicss',
  ],
})

Typescript

For Nuxt config typescript support, add the module within your tsconfig.json.

{
  "compilerOptions": {
    "types": [
      "nuxt-windicss"
    ]
  }
}

Windi Analyzer

An analyser tool for Windi CSS. Browse your utilities usages, have an overview of your design system, identify "bad practices", and more!

You can enable Windi Analzyer using the Nuxt config. The analyser is only available in development mode.

export default defineNuxtConfig({
  buildModules: [
    'nuxt-windicss',
  ],
  windicss: {
    analyze: true
  }
})

Alternatively you can provide an object to control the analysis or the server.

windicss: {
  analyze: {
    analysis: {
      interpretUtilities: false,
    }
    // see https://github.com/unjs/listhen#options
    server: {
      port: 4444,
      open: true,
    }
  }
}

Migrating from tailwind

This module won't work with @nuxtjs/tailwindcss, you will need to remove it.

buildModules: [
-  '@nuxtjs/tailwindcss',
],

If you have a tailwind.config.js, please rename it to windi.config.js or windi.config.ts.

Follow the migration guide for other change details.

Ordering (optional)

By default, this all windi layers will be automatically imported for you.

If you'd like to change the layout ordering you can include the layers in any order you like.

For example, if you had a main.css which had h1 { margin-bottom: 30px; }, you might do something like this:

// nuxt.config.js
export default {
  // ...
  css: [
    // windi preflight
    'virtual:windi-base.css',
    // your stylesheets which overrides the preflight
    '@/css/main.css', 
    // windi extras
    'virtual:windi-components.css',
    'virtual:windi-utilities.css',
  ],
}

Documentation

Read the documentation for more details.

Credits

  • Windy team
  • @antfu Based on his Rollup / Vite implementation & his util package

License

MIT License ยฉ 2021 Harlan Wilton

nuxt-windicss's People

Contributors

antfu avatar atinux avatar danielroe avatar freality avatar harlan-zw avatar jbsiddall avatar kn0wn avatar manutopik avatar nulltask avatar pi0 avatar voorjaar avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.