[ CSS ] Tailwind CSS

Tailwind CSS

HTML 안에서 CSS 스타일을 만들 수 있게 해주는 CSS프레임워크입니다.
Tailwind CSS는 부트스트랩과 같이 미리 셋팅된 Uitility Class를 활용하는 방식으로 HTML에서 스타일링 할 수 있습니다.
빠른 스타일링 작업이 가능하며, Class 혹은 id 명을 작성하기 위한 고생을 하지 않아도 됩니다. 유틸리티 클래스가 익숙해지는 시간이 필요할 수 있지만 IntelliSense 플러그인이 제공되어서 금방 익숙하게 사용할 수 있습니다.

 

1. 프로젝트 사용 셋팅

셋팅 방법은 아래 홈페이지에서 자세하게 확인 할수 있습니다.

Install Tailwind CSS using PostCSS - Tailwind CSS

 

1) 프로젝트에 tailwindcss 설치

nps tailwindcss init

 

2) 📑tailwind.config.js

사용 위치를 표기해줍니다.

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    './src/**/*.{js,jsx,ts,tsx}',
    './index.html',
    './src/styles/main.css'
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

 

3) 📑index.css

@tailwindTailwind의 각 레이어에 대한 지시문을 기본 CSS 파일에 추가합니다 .

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

 

 

2. postcss 사용

postcss는 javascirpt로 css를 변경해주는 역할을 합니다.

• 기본 css에 공급업체 접두사를 추가해줍니다. (모든 브라우저에서 사용가능하도록 변경)
• 최신 css를 모든 브라우저가 알 수 있는 코드로 변환해줍니다.
• 일반적인 명칭은 유니크한 명칭으로 변경해줍니다.
• 에러 수정을 알려줍니다.

1) 📑postcss.config.cjs

module.exports = {
	Plugins:{
		tailwindcss :{},
		autoprefixer:{},
	}
}