지난번에 Sass와 관련한 포스팅을 했었다.
css에서 Sass로 넘어가고 신세계라고 느꼈는데,
이번에는 tailwind를 접하고 또 다른 새로움을 경험했다!
Sass 한 번만 써본 사람은 없을걸🤩 << 게시글 바로가기
📍 Tailwind CSS
tailwind CSS는 utility-first의 css 프레임워크이다. 인라인 스타일링처럼 HTML 코드에 스타일링 하는 방식으로 사전에 정의된 클래스를 사용해서 빠르게 화면을 구현할 수 있다. 그리고 커스터마이징과 확장성이 자유롭다는 특징이 있다.
📍 Tailwind 사용법
tailwind 사용을 원하는 프로젝트에서 터미널을 켜고, 아래와 같이 입력한다.
npm install -D tailwindcss
npx tailwindcss init그 이후, 자동으로 생성된 tailwind.config.js 파일에 스타일링 커스터마이징을 한다. 해당 파일에 컬러, 폰트, 미디어 쿼리 등 다양한 항목을 사전에 정의하여 프로젝트 생산성을 높일 수 있다.
📍 Tailwind 사용 후기
프로그래머가 가장 힘들어하는 '이름 짓기'를 필요없게 해 주는 tailwind
➡️ 과연 장점 뿐일까?
tailwind는 클래스명이 css 속성이기 때문에, 클래스명을 공들여 지을 필요가 없었다.
아래는 내가 작업하던 프로젝트의 일부인데, 보다싶이 코드가 지저분하다..
내가 tailwind에 익숙치 않아서 그런건지? 코드가 한 눈에 들어오지 않았다 🥲
그래도 클래스명에 css 속성을 넣을 수 있다보니, css 파일을 따로 생성할 필요가 없었고 js 파일에서 js+css를 통합해서 작업할 수 있어서 정말 편리했다!
수련 중🧘🏼♀️