Series

[ 살펴보기 ] - Tailwind CSS

Utility-first CSS framework인 TailwindCSS에 대해 살펴보자

[ 살펴보기 ] TailwindCSS - Concepts
Frontend 개발시 application을 구성하는 UI 작업을 하는데는 여러가지 방법이 있다. Plain CSS또는 SCSS와 같은 Pre-processor를 사용하여 UI 작업을 하거나 Emotion과 같은 CSS-in-JS library를 통해 styled-component를 통해 UI을 구성하거나 MUI, Ant Design과 같이 미리 만들어진 styled-component를 제공하는 library를 통해 작업할 수도 있을 것이다....
Sep 4, 20242 min read14
[ 살펴보기 ] TailwindCSS - Hover, groups and more
TailwindCSS를 통해 Tailwind가 제공하는 utility class를 설정하여 style을 적용하는 것 외에 hover, focus와 같은 action에 따른 style 적용이나 responseive style적용 또한 가능하다. Hover, focus and more 특정 element를 hover했을 때 다른 style을 적용하고 싶다면 다음과 같이 hover:style 형식으로 스타일을 적용한다. <h1 className="t...
Sep 5, 20245 min read4
[ 살펴보기 ] Tailwind - Configuration
Tailwind가 default로 제공하는 theme 뿐만 아니라 원하는 style을 추가해서 theme을 확장할 수 있다. 또는 프로젝트에 적용하려는 design system이 있다면 Tailwind에서 사용하는 default theme을 override할 수도 있다. Project root 경로에 존재하는 tailwind.config.ts 파일을 통해 원하는 theme을 customizing할 수 있다. 우선 color theme을 cust...
Sep 9, 20245 min read10
[ 살펴보기 ] TailwindCSS - Plugin
Tailwind에선 plugin을 통해 특정 html element의 default style을 reset하거나 특정 element에 목적에 따른 style을 추가하는 등 다양한 작업을 할 수 있다. 본인만의 plugin을 만들어 적용할 수도 있지만 우선 Tailwind에서 제공하는 Official plugin을 살펴보자. Typography plugin Typography plugin는 prose라는 새로운 class utility를 제공하며...
Sep 10, 20247 min read4
[ 살펴보기 ] Tailwind - Presets
만약 여러 project에 공통으로 적용하고 있는 color palette가 있다면 preset으로 따로 빼놓고 각 프로젝트마다 해당 preset을 적용하여 사용할 수 있다. Tailwind에서 preset이란 단순히 tailwind configuration obejct를 말한다. 다음 예제를 살펴보자. import type { Config } from "tailwindcss"; const PRESET_BASE: Pick<Config, "th...
Sep 11, 20246 min read4
[ 살펴보기 ] Tailwind - Tips & Tricks
Dynamic Value TailwindCSS를 사용할 때 주의할 점 중 하나는 class utility에 dynamic한 값을 삽입하여 사용할 수 없다는 것이다. const Home = () => { const [color, setColor] = useState("purple"); const handleColor = (color: string) => { setColor(color); }; return ( <main...
Sep 18, 20249 min read16

Command Palette