# Tailwind CSS
CSS 프레임워크
CSS 전처리기는 우리(개발자)에겐 CSS보단 친화적이지만 브라우저가 해석하지 못하는 언어로 작성된 스크립트를 별도 플러그인과 프레임워크를 통해 우리가 아는 CSS로 변환하는데 사용한다. 기존 CSS의 단점인 유지보수의 불편함 등을 보완한다.Sass는 기본적으로 SAS
UI 구현을 쉽고 빠르게! Tailwind CSS
개발자들은 UI를 손쉽게 구현하기 위하여 CSS 프레임워크를 사용합니다. 그 중에 Tailwind CSS에 대해 이야기해보도록 하겠습니다!
[Tailwind CSS] vscode 플러그인
html 작성 시, 입력한 문자로 시작하는 클래스명들을 보여준다.vscode에서 tailwind 클래스명들을 속성별로 검색 확인할 수 있다.이와 비슷한 플러그인으로는 Tailwind Docs가 있는데, 이는 vscode에서의 바로 확인은 아니고, 검색한 클래스의 설명이
TailwindCSS
다양한 CSS 명명법이 있다는 것을 알지 못하고 있다 최근에, BEM 명명에 대해 알고 난 뒤 다른 CSS 스타일은 어떤 것들이 있는지 궁금해졌다.HTML, CSS, Vanilla JavaScript를 통해 다양한 시도를 해보던 중, 확실히 명확한 클래스명을 짓는다는
Tailwind CSS (NextJs환경에서 사용하기)
오늘은 요즘 핫한 CSS 프레임워크인 Tailwind CSS를 Nextjs 환경에서 적용해보며 배워볼 예정이다.Tailwind CSS 는 Utility-First Fundamentals로 이루어진 CSS 프레임워크이다. 아래 예제를 보며 tailwind css를 이
⚙️PostCSS 사용하여 Tailwind CSS 개발환경 설정
⚙️PostCSS 사용하여 Tailwind CSS 개발환경 설정 📍Tailwind CSS 설치 📍tailwind.config.js postcss.config.js 추가 📍tailwind.config.js 템플릿 경로 추가 📍tailwind.css css에 tailwind 지시문 추가 tailwind.css 📍package.json scrip...
3. Tailwind CSS 활용(2)
테두리 두께를 지정할 수 있습니다.태두리의 색상을 지정할 수 있습니다.테두리의 디자인을 선택할 수 있습니다.테두리의 Radus를 설정할 수 있습니다.예시CSS의 display 속성을 자유롭게 설정할 수 있습니다.예시Flex도 자유롭게 사용 가능합니다.예시
[노마드코더] 캐럿마켓 클론코딩 (1) - Tailwind CSS
Tailwind는 공식 페이지에서 말하길 'utility-first CSS framwork'라고 한다. 이 말인 즉슨 Tailwind가 아주 많은 class를 가지고 있고 우리는 이 여러 class명을 조합하여 가져다 쓸 수 있도록 해준다는 것이다. flex, pt-
2. Tailwind CSS 활용
손쉽게 배경을 변경할 수 있습니다.예시만약 브라우저에서 1rem === 16px일 경우 size\*4px를 통해 넓이 / 높이를 손쉽게 지정해줍니다.w-32 => 32\*4 = 128px예시패딩과 마진을 클래스 형태로 지정할 수 있습니다.만약 브라우저에서 1rem ==
1. Tailwind CSS란?
Utility-First를 지향하는 CSS 프레임워크입니다.CSS의 각 속성들을 클래스에 직관적으로 표현함으로써 효율적으로 사용할 수 있게 됩니다.스타일링에 필요한 대부분의 속성들이 클래스 형태로 사전에 정의되어 있고 사용자는 클래스들을 조합해요 사용하면 됩니다.예시
TailWind CSS + Vue
TailWind CSS는 유틸리티 를 우선으로 하는 CSS 프레임워크 마크업에서 직접 모든 디자인을 빌드하도록 구성할 수 있다.
