Tailwind 썸네일형 리스트형 react js프로젝트에 tailwind 설치하기 react js프로젝트에 tailwind 설치하기 [작성자의 다른 글 보러가기: 'Tailwind가 그래서 뭔데?'] 1. 타입스크립트가 적용된 리액트 프로젝트 셋팅하기 나는 create-react-app 을 사용해서 프로젝트를 셋팅할거다. create-react-app 홈페이지에 나와있는 아래의 명령어를 실행한다. 2. tailwind css 설치하고 적용하기 tailwind css 공식 홈페이지에 나온대로 명령어를 실행한다. 3. 아래 명령어를 실행하면 tailwind.config.js 랑 postcss.config.js 파일이 생긴다. 4.tailwind.config.js 를 아래처럼 작성한다. module.exports = { content: [ "./src/**/*.{js,jsx,ts,tsx}".. 더보기 Tailwind 란 무엇일까? Tailwind CSS Tailwind CSS는 이름에서 부터 알 수 있듯이 CSS Framework 이다. 하지만 Bootstrap과 같은 다른 CSS 프레임 워크들과는 다르게 Tailwind CSS는 디자인의 커스터마이징이 아주 편하다. 또한 아래와 같은 장점들을 갖고 있다. 이미 제작된 유틸리티 클래스들 사용하여, 따로 직접 만들 필요가 없다 동적 클래스의 JLT 컴파일, 반응형 디자인 등 유용한 기능을 제공한다. 해당 프레임워크를 쉽게 커스터마이징 할 수 있다. 클레스 이름을 자동생성해주기에, 클레스 네이밍하는데 있어서 불필요한 업무량을 줄여준다. 기본 CSS 코드와 Tailwind를 사용한 코드비교 CSS코드 Tailwind 코드 코드가 놀랍도록 줄어들지만 class 이름이 가독성이 많이 떨어진.. 더보기 이전 1 다음
