tailwindcss2 tailwindcss 클래스 정렬 플러그인 설치 npm install -D prettier prettier-plugin-tailwindcss 해당 플러그인은 tailwindcss 공식 Prettier 플러그인입니다. 클래스명을 tailwindcss가 정한 기준대로 나열해주니 한결 코드가 깔끔해지는걸 느낄 수 있습니다. formatting 적용 예시 ... ... 문서에 따르면 컴포넌트 레이어 -> 유틸리티 레이어 순으로 정렬시키고 있다고 합니다. margin이나 padding처럼 top bottom left right 특정 위치만 스타일을 주는 경우에, 전체적으로 스타일을 주는 margin이나 padding 뒤에 오도록 정렬합니다. ... 유틸리티 레이어들의 클래스명 정렬 순서는 박스가 하나 있다고 생각하고, 해당 클래스를 통해 박스가 레이아웃에.. 2022. 3. 13. 리액트에서 tailwindcss 사용하기. 그런데 styled-components를 곁들인. 저는 리액트에서 주로 styled-components를 이용해서 스타일링을 하고 있습니다. 스타일링에 항상 자신이 없어서 이번에 tailwindcss를 써봤는데, 반응형도 처리하기 쉽고 생각보다 편리하더군요. 그래서 styled-components + tailwindcss 를 사용한 세팅 방법을 기록하기 위해 작성합니다. 저 두가지에 추가적으로 twin.macro 라는 라이브러리를 사용했는데요. 이 라이브러리는 styled-components 안에서 tailwindcss를 작성할 수 있게 도와줍니다. 짱짱 설치 tailwindcss 설치 yarn add -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9 craco 설치 y.. 2021. 8. 20. 이전 1 다음
