[TailwindCSS] tailwind 사용하기

오늘은 tailwind에 대해서 정리해보려고 한다. 내가 아는 css 프레임워크는 bootstrap밖에 없었는데,, 회사에 오니까 정말 다양한 것들이 많다는 것을 알게되는 것 같다. 역시 개발자,, 멋진 직업,,👍

✨ Tailwind CSS 설치하기

Installation - Tailwind CSS

 

우선 VSCode에서 터미널을 열고 아래 명령어를 입력해준다. (Nuxt.js 3 로 개발중입니다.)

npm install -D tailwindcss
npx tailwindcss init

두 개의 명령어를 입력하면 root 경로에 tailwind.config.js 라는 설정 파일이 생성된다.

이제 3가지를 설정해야한다.

1. tailwind.config.ts

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

 

 

2. nuxt.config.ts[js]

아래 코드블럭에 있는 코드들을 복사해서

  modules: [
    '@nuxtjs/tailwindcss'
  ],

  css: ['~/assets/css/tailwind.css'],
  postcss: {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    },
  },

defineNuxtConfig() 함수 안에 넣어주면 된다.

 

3. tailwind.css

nuxt.config.ts에 선언한대로 assets/css/tailwind.css를 생성하여

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

이 코드를 넣어준다 ! 이 부분에는 공통적으로 사용할 css를 넣어두는 게 좋을 것 같아 나는 body, header에 관한 style을 정의해주었다.

 

✨ Tailwind CSS 장점

tailwind를 사용해보니 정말 간편한게 class명에 정의된 속성을 넣어주면 알아서 스타일이 적용된다는 것이다.

<template>
    <div class="fixed text-white bg-blue-500" >
        {{ text }}
    </div>
</template>

<script setup>

const isShow = ref(false);
const text = ref("");

defineExpose({  isShow, text });

</script>

이렇게 클래스명에 fixed, text-white, bg-blue-500를 주면

position:fixed, color:white, background:#6366f1가 적용되는 것이다!

 

아래 사이트에 어떤 스타일이 어떤 클래스명을 갖는지 잘 정리되어 있다 :)

Position - Tailwind CSS