📌 Tailwind란?

부트스트랩과 비슷하게 CSS를 직접 작성하지 않고 HTML 요소에 클래스를 사용하여 직접 스타일을 적용하는 CSS 프레임워크이다. 반응형 디자인을 쉽게 구축하고 관리할 수 있는 기능을 제공하기도 한다.

🔷 장점

• 빠른 스타일링 작업이 가능하다

• class명이나 id명을 작성하기 위해 고민하지 않아도 된다

• IntelliSense 플러그인이 제공되어 쉽게 사용이 가능하다

• 반응형을 쉽게 개발 할 수 있도록 도와준다

  
  

< Tailwind Css IntelliSense >

tailwind에서 사용하는 옵션들을 자동완성 시켜주며 vscode의 확장탭에서 설치가 가능하다

🔷 설치

🌐 공식 홈페이지: https://tailwindcss.com/docs/guides/create-react-app

npm install -D tailwindcss

npx tailwindcss init

위의 명령어를 실행하면 tailwind.config.js 파일과 postcss.config.js 파일이 생성된다.

그리고 Tailwind가 적용되는 범위를 지정해준다.
나는 src 폴더안의 코드들을 적용시킬거여서 src 폴더 경로와 함께 파일 형식들을 지정해주었다.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [".scr/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

그 다음으로는 index.css에 @tailwind 지시문을 추가해주어야 한다

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

app.js에 공식 문서에 있는 예시 코드를 넣어주고

export default function App() {
  return (
    <h1 className="text-3xl font-bold underline">
      Hello world!
    </h1>
  )
}

실행시켜보면 잘 나오는걸 확인할 수 있다.

🔷 사용 후기

사용법 익힐겸 이것저것 쳐보았는데 진짜 반응형 너무 놀랍다....
sm:text-4xl 이 코드 한개로 아래 보이다시피 저 반응형 코드를 대체해준다는게 정말 대박이다🤪

Tailwind 연습해보면서 간단한 반응형 사이트 하나를 만들어 보았다.
예전에 스타벅스 클론 코딩 했을때는 하나하나 다 CSS로 적용하느라 시간이 정말 오래 걸렸는데 오늘 만든 사이트는 한 3시간동안 뚝딱 만든거 같다
진짜 너무 쉽고 간편하다

🌳 오늘 연습한 Tawlwind 레포: https://github.com/yunbiyomi/tailwind-app