Nuxt3 APP

• 建立一個nuxt3 app
• 配置tailwind
  • install packages
  • tailwind.config.js
  • tailwind.css
  • postcss.config.js
  • nuxt.config.js
• 配置scss
• 代碼

建立一個nuxt3 app

node版本: 16.13.0套件使用版本

{
  "devDependencies": {
    "autoprefixer": "^10.4.7",
    "nuxt": "3.0.0-rc.6",
    "postcss": "^8.4.14",
    "sass": "^1.53.0",
    "sass-loader": "10.1.1",
    "tailwindcss": "^3.1.6"
  }
}

官方建議使用 1.vscode 2.volor套件

npx nuxi init {nuxt-app-name}

---

配置tailwind

install packages

npm install -D tailwindcss postcss@latest autoprefixer@latest

tailwind.config.js

npx tailwindcss init

module.exports = {
  mode: 'jit',
  content: [
    './components/**/*.{vue,js}',
    './layouts/**/*.vue',
    './pages/**/*.vue',
    './plugins/**/*.{js,ts}',
    './app.vue',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

tailwind.css

@tailwind base;
@tailwind components;
@tailwind utilities;

postcss.config.js

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

nuxt.config.js

export default defineNuxtConfig({
  css: ['@/assets/css/tailwind.css'],
  build: {
    postcss: {
      postcssOptions: require('./postcss.config.js'),
    },
  },
});

---

配置scss

package:sass-loader、sass

npm i -D sass-loader@10.1.1 --save-exact && npm i -D sass

代碼

<script setup>
import '@/assets/css/tailwind.css';
</script>
<template>
    <div>
        <h1 class="title">
            Hello~~
            <span>World</span>
        </h1>
    </div>
</template>

<style lang="scss">
.title {
    @apply font-bold text-2xl text-red-600;
    span {
        @apply text-purple-600;
    }
}
</style>