웹 개발/HTML,CSS

Tailwind Css (설치 및 간단 사용법)

개발하는 동이 2024. 8. 18. 22:19
728x90

요즘 코테 준비만해서 웹 관련된 공부를 뒤로 미루게 되더라고요.. 그래서 공고 사이트인 잡코리아, 사람인을 보면 

Tailwind Css가 요즘 많이 있더라구요 그래서 저한테는 부족한 부분이라서 이 부분을 메꾸기 위해 공부를 해보려고 합니다.

 

좀 늦은 감이 있지만 명수옹이 말씀하신 늦었을 때가 진짜 너무 늦었다. 그러니까 바로 시작해라!라는 말씀이 있었죠?

이 말을 실천해볼라고 공부를 해보려고 합니다. 간단하게만 리뷰하도록 하겠습니다!

 

TailWind Css

위키피디아

 

Tailwind CSS는 유틸리티-퍼스트(Utility-first) CSS 프레임워크로, 다양한 CSS 클래스를 미리 정의해 두어 빠르고 효율적인 스타일링을 가능하게 합니다. CSS와 달리 Tailwind는 개별적인 스타일 속성(예: margin, padding, color)을 위한 클래스를 제공하며, 이를 조합하여 사용자 정의 디자인을 만들 수 있습니다. 이로 인해 스타일링이 일관되고 유지 관리가 쉬워지며, 커스텀 CSS 코드를 최소화할 수 있습니다.

 

예시 코드

  <h1 class="text-3xl font-bold underline">
    Hello world!
  </h1>

 

Tailwind css는 css를 문법적으로 만들어서 사용한다라는 생각 하면 편할 것 같습니다. 

(제가 이해하기로는... 허허...)

tailwind css는 진입 장벽이 낮은 편이기에 다들 공부해보시는 편이 좋을 것 같습니다.

외우기만 하면되거든요 직관적이기에 다들 외우기 편하실 거예요!

오늘은 간단하게 버튼을 만드는 것으로 리뷰하도록 하겠습니다.

npx create-react-app ./tailwind-css --template typescript

를 통해서 프로젝트를 생성해 주시고요~

 

1단계

npm install tailwindcss 

라고 터미널 입력 이후 

 

2단계

npx tailwindcss init

를 입력하여 tailwind.config.js 파일이 생성되면 이런 식으로 작성해 주시면 됩니다.

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: ['./src/**/*.{js,ts,jsx,tsx}'],
    // 적용할 파일의 경로를 입력해주시면 됩니다.
    theme: {
        extend: {},
    },
    plugins: [],
};

 

3단계

main.css파일을 생성하고 이 3가지를 꼭 입력해 주세요!

@tailwind base;
@tailwind components;
@tailwind utilities

 

하시면 사용할 준비가 완료되었습니다.

 

추가적인 팁으로 저는 확장으로  Tailwind CSS IntelliSense를 설치해 주었는데  className에 작성할 때 도움이 많이 됩니다

https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss 

 

Tailwind CSS IntelliSense - Visual Studio Marketplace

Extension for Visual Studio Code - Intelligent Tailwind CSS tooling for VS Code

marketplace.visualstudio.com

자세한 부분은 링크를 통해 봐주시면 됩니다.

 

제가 오늘 작성한 코드입니다. 

다음 포스트에는 심화 과정으로 다룰 예정입니다.

 

tailwind css를 사용하면서 느낀 점은

1. html 문법이 가독성이 떨어져 굉장히 더럽다는 느낌이 들었습니다. 

- 가독성이 많이 떨어진다는 느낌이 들었습니다.

 

2. 숙련도를 많이 요구할 것 같습니다.

- 저도 css나 scss를 많이 사용하여 어색한 감이 없이 않아 있었고 문법들이 정해져 있기에 많이 사용하면서 익혀야 할 것 같습니다.

 

3. 클래스 이름을 시맨틱 하게 정하는 시간이 사라졌다.

- 좋은 개발자들은 클래스 이름을 다들 다 짓는데 저는 이 부분이 부족해서 클래스 이름을 고민하는 시간이 사라졌다는 것이 장점입니다. 

 

4. 페이지 수정 시 CSS가 어떻게 정의되었는지 확인하는 시간이 단축되었습니다.

- 직관적이기에 수정하는 시간이 많이 줄어들 것 같습니다.

다음 프로젝트 진행할 때는 tailwind css를 써봐야겠습니다.!

블로그에 대한 부족한 부분은 언제든 피드백 해주시면 감사하겠습니다!

 

간단한 것이지만 못 따라오는 분들도 있다고 생각하여 git 올려두었습니다. 구성 참조 하실 분들은 참조하시면 좋겠습니다.

https://github.com/DongEsssss/tailwind-css-simple

728x90
반응형