🔮 설치하기
1) 테일윈드를 사용하고자 하는 디렉토리에서 터미널을 켭니다.
2) 터미널에서 아래의 명령어를 입력하여 tailwindcss, postcss, autoprefixer를 설치합니다.
npm install -D tailwindcss postcss autoprefixer
3) 터미널에서 아래의 명령어를 입력하여 'tailwind.config.js'와 'postcss.config.js' 파일을 생성합니다.
npx tailwindcss init -p
4) 'postcss.config.js' 파일을 열어 다음과 같은 내용으로 설정되어 있는지 확인합니다.
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
5) 'tailwind.config.js' 파일의 content 내용을 테일윈드를 적용하고 싶은 폴더 및 파일의 경로로 수정합니다.
/** @type {import('tailwindcss').Config} */
export default {
content: [
"여기에 원하는 경로 추가하기"
],
theme: {
extend: {},
},
plugins: [],
}예를 들어, 아래와 같은 내용을 추가할 수 있습니다.
content: [
"./index.html",
"./src/**/*.{html,js,jsx,ts,tsx}",
"./components/**/*.{html,js,jsx,ts,tsx}",
"./pages/**/*.{html,js,jsx,ts,tsx}",
"./styles/**/*.{html,js,jsx,ts,tsx}",
],
// 의미는 다음과 같습니다
/*
content: [
'./index.html' 파일,
'./src' 디렉토리 아래에 위치한 모든 html,js,jsx,ts,tsx 파일,
'./components' 디렉토리 아래에 위치한 모든 html,js,jsx,ts,tsx 파일,
'./pages' 디렉토리 아래에 위치한 모든 html,js,jsx,ts,tsx 파일,
'./styles' 디렉토리 아래에 위치한 모든 html,js,jsx,ts,tsx 파일,
],
*/
6) 모든 스타일의 부모가 되는 css 파일('global.css, 'styles.css' 등)의 상단에 @tailwind가 포함된 3줄을 추가합니다.
@tailwind base; /* 기본 스타일 */
@tailwind components; /* 컴포넌트 스타일 */
@tailwind utilities; /* 유틸리티 클래스들 */
* {
...기존 css 내용들
}Tailwind의 공식 문서는 다음 링크를 참고해주세요
테일윈드와 같이 설치한 도구들의 역할은 다음과 같습니다.
- Post CSS
- 자바스크립트 기반의 플러그인을 사용해 css를 변환하는 프레임워크입니다.
- css 변수, 믹스인, 중첩 등을 지원하는 플러그인을 추가할 수 있습니다.
- 중복된 코드나 사용되지 않는 css 코드를 자동으로 제거하여 css 코드의 품질을 개선합니다.
- Autoprefixer
- Post CSS의 플러그인 중 하나입니다.
- css 속성에 브라우저 호환성을 위한 벤더 프리픽스를 자동으로 추가합니다.
- ex) '-webkit', '-moz-', '-ms-', '-o-'
- 프로젝트가 지원할 브라우저의 범위를 정의할 수 있습니다.
- Can I Use의 데이터베이스를 기반으로 필요한 프리픽스를 추가합니다.
🔮 사용해보기
스타일을 적용하고 싶은 태그의 클래스 네임에 속성에 테일윈드의 유틸리티 클래스를 작성합니다.
export default function App() {
return (
<h1 className="text-3xl font-bold underline">
Hello world!
</h1>
)
}다음과 같이 잘 적용되는 것을 볼 수 있습니다.
className="text-3xl font-bold underline"를 일반 css로 작성한 코드는 다음과 같습니다.
🔮 유용한 도구들
처음에는 테일윈드의 유틸리티 클래스가 헷갈릴 수 있습니다.
이를 돕기 위해 아래에 소개된 도구들을 활용하면 적응하는 기간을 단축할 수 있을 것입니다.
1. Tailwind CSS IntelliSense (VSCode extension)
만약 VSCode 환경에서 개발을 한다면 'Tailwind CSS IntelliSense'라는 확장 프로그램을 사용할 수 있습니다.
아래 사진처럼 자동완성, 린팅, css 미리보기 등의 기능 제공합니다.
2. Tailwind Cheat Sheet
그리고 'Tailwind Cheat Sheet'이라는 사이트가 있습니다.
검색창에 알고 싶은 css 속성을 입력하면 그에 맞는 테일윈드의 유틸리티 클래스를 알려줍니다.
3. 자동 정렬 Prettier 플러그인
테일윈드에서 공식으로 제공하는 프리티어 플러그인으로써 테일윈드에서 지정한 순서대로 클래스들을 정렬해줍니다.
설치 방법은 다음과 같습니다.
1) 테일윈드를 사용 중인 디렉토리에서 터미널을 켭니다.
2) 아래의 명령어를 입력해 프리티어를 설치합니다.
npm install -D prettier prettier-plugin-tailwindcss3) 디렉토리의 최상단에 '.prettierrc'라는 파일을 생성하고, 아래의 내용을 작성합니다.
{
"plugins": ["prettier-plugin-tailwindcss"]
}4) 코드를 작성한 뒤 저장하면 프리티어가 적용되어 클래스들이 정렬된 모습을 볼 수 있습니다.
공식 문서는 다음 링크를 참고해주세요
읽어주셔서 감사합니다:)
