【Nuxt3学习】2. 集成 windicss

源码地址： https://github.com/xbmlz/nuxt-starter.git

介绍

https://windicss.org/

Next generation utility-first CSS framework.

安装

pnpm add -D nuxt-windicss @windicss/plugin-animations

使用

修改nuxt.config.ts如下

import { defineNuxtConfig } from 'nuxt3'

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

新增windi.config.ts文件

import { defineConfig } from "windicss/helpers";

export default defineConfig({
  preflight: false,
  extract: {
    include: ["**/*.{vue,html,jsx,tsx}"],
    exclude: ["node_modules", ".git"],
  },
});

修改pages/index.vue如下

<template>
  <div>
    <h1 class="text-red-600">Index Page</h1>
  </div>
</template>

<script setup>
import {} from "vue";
</script>

<style scoped></style>

浏览器打开http://localhost:3000/，效果如下