2. Tailwind CSS

테일윈드 CSS 는 CSS 프레임워크 중에 최근 2~3 년간 가장 주목받는 CSS 프레임워크가 되었다, 가장 최근에는 메타에서 만든 StyleX 도 급부상하고 있다. 최근 웹 프런트엔드 개발 생태계를 보면, 테일윈드 CSS를 기본 CSS 프레임워크로 정하고 만들어진 오픈소스, 강좌 및 블로그가 대부분인 것을 알 수 있다. 이 강좌에서도 테일윈드를 기본으로 쓰겠다.

 

1. 설치

설치는 테일윈드 사이트에 보면 각 프런트엔드 프레임워크에 맞는 설치 가이드가 이미 제공된다. Nuxt 가이드를 보면 두가지 방법이 있는데, 첫 번째 방법인 'Standard Installation' 에 나와있는 가이드를 따라 하겠다.

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

 

2. PostCSS 설정에 에 테일윈드 설정 적용

nuxt.config.ts

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  devtools: { enabled: true },
  postcss: {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    },
  },
})

 

npx tailwindcss init 명령 이후에 tailwind.config.js 파일이 새로 생긴다. 아래와 같이 수정하자.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./components/**/*.{js,vue,ts}",
    "./layouts/**/*.vue",
    "./pages/**/*.vue",
    "./plugins/**/*.{js,ts}",
    "./app.vue",
    "./error.vue",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

 

첫장에서는 sass 를 썼지만, 이번 장에서는 테일윈드를 쓰므로 /assets/main.scss 파일을 /assets/main.css 로 바꾸고 내용을 아래와 같이 바꾼다.

 

/assets/main.css

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

 

nuxt.config.ts 의 css 속성을 아래와 같이 바꾸고, css 적용을 위해 app.vue 소스도 바꾼다.

 

nuxt.config.ts

// https://nuxt.com/docs/api/configuration/nuxt-config
import { resolve } from "path";

export default defineNuxtConfig({
  devtools: { enabled: true },
  alias: {
    "@": resolve(__dirname, '/')
  },
  css: [
      "~/assets/main.css"
  ]
})

 

app.vue

<template>
  <div class="text-3xl font-bold underline">
    Welcome to Nuxt3
  </div>
</template>

다시 npm run dev 로 확인하면 아래와 같이 테일윈드 CSS가 적용된 화면이 나온다.