Tailwind CSS를 Ruby on Rails 프로젝트에 쉽게 통합하세요

모든 웹사이트에서 CSS(Cascading Style Sheets)의 중요성은 아무리 강조해도 지나치지 않습니다. 1996년 후반에 첫 번째 CSS 표준이 발표된 이후 우리는 기능과 생태계에 관해 상당한 진전을 이루었습니다.

여러 프레임워크가 등장하여 인기를 얻었으며 가장 최근에는 Tailwind CSS가 있습니다.

이 게시물에서는 Ruby on Rails 애플리케이션에서 Tailwind를 사용하는 방법을 알아보기 전에 먼저 Tailwind의 유틸리티 우선 접근 방식을 살펴보겠습니다. 맞춤 CSS와 긴 디버깅 세션 없이도 Tailwind가 우수한 웹사이트를 구축하는 데 어떻게 도움이 되는지 살펴보겠습니다.

시작해 보세요!

Tailwind CSS:유틸리티 우선 접근 방식

대부분의 CSS 프레임워크(예:Foundation, Bootstrap 또는 Bulma)는 버튼, 양식 필드 등 즉시 사용 가능한 구성 요소를 제공하므로 블록을 신속하게 조합하여 인터페이스를 형성할 수 있습니다.

일반적으로 Bootstrap을 사용하여 버튼을 추가하는 방법은 다음과 같습니다:

이 예에서는 btn를 적용하여 간단한 버튼을 정의하고 스타일을 지정했습니다. 그리고 btn-primary 수업. btn-primary 사용 사례에 적합한 색상을 설정합니다. 그러나 해당 인터페이스는 우리 요구 사항에 맞지 않으므로 모든 구성 요소를 사용자 정의하기 위해 사용자 정의 CSS 스타일시트를 추가합니다.

Tailwind는 "유틸리티 우선" 개념입니다. 버튼과 같은 즉시 사용 가능한 구성 요소를 제공하는 대신 사용자 정의 디자인을 작성하기 위해 구성할 수 있는 하위 수준 유틸리티 클래스가 있습니다. 따라서 미리 정의된 클래스를 HTML에 직접 적용하는 스타일 지정에 대한 보다 기능적인 접근 방식을 권장합니다. 이는 사용자 정의 CSS의 필요성을 최소화하고 유틸리티 클래스의 제약을 통해 디자인 일관성을 촉진하는 것을 목표로 합니다.

'유틸리티 우선'은 Tailwind가 복잡한 디자인을 구성하기 위해 결합할 수 있는 원자성, 단일 목적 클래스를 제공한다는 의미입니다.

Tailwind와 Bootstrap을 비교하는 몇 가지 코드를 살펴보겠습니다. 먼저, Tailwind를 통해 간단한 버튼 스타일을 지정하는 방법은 다음과 같습니다.

구성할 일련의 버튼 요소 클래스가 있습니다:

• 배경 색상 bg-blue-500 : '파랑'은 미리 선택된 색상이지만 숫자로 색상 음영을 설정할 수 있습니다. 숫자가 높을수록 색상이 어두워집니다.
• 마우스를 올리면 배경 색상: hover:bg-blue-600 .
• 텍스트 색상 text-white : 흰색이므로 숫자가 필요하지 않습니다. 텍스트-빨간색과 같이 숫자를 지정하지 않으면 항상 기본 음영이 있습니다.
• 세로 패딩 py-2 : 'p'는 패딩이고 'y'는 세로 축, '2'는 간격 값으로, 픽셀 단위가 아니라 Tailwind에 정의된 배율입니다.
• 가로 패딩 px-4 : 위와 동일하며 가로축은 'x'입니다.
• 둥근 모서리: rounded .

이는 Bootstrap 예제보다 더 장황해 보이지만 클래스만 추가하면 스타일의 각 부분을 조정할 수 있습니다. 사용자 정의 CSS 클래스를 만들 필요가 없습니다.

이러한 색상이 마음에 들지 않을 수도 있지만 좋은 소식은 사용자 정의 색상을 추가할 수 있다는 것입니다. 이에 대해서는 나중에 다루겠습니다.

저울에 관한 말씀

CSS는 간격(예:여백 및 패딩)과 관련하여 강력하며 픽셀 및 rems(root-em, 루트 요소의 크기에 상대적인 크기)로 작업할 수 있습니다. 하지만 이는 어려운 경향이 있습니다. Tailwind에는 복잡성을 숨기는 동시에 비례성을 높이는 데 도움이 되는 자체 간격 스케일이 제공됩니다.

기본적으로 Tailwind는 0에서 96 사이의 값을 제공하며 각 단계는 다른 단계에 비례합니다. 예를 들어, 16 값 8보다 간격이 두 배 더 많습니다. . 덕분에 우리는 렘이나 픽셀로 작업하기 위해 수학을 할 필요가 없습니다. 우리는 선호하는 값을 정의하고 이를 디자인 전반에 걸쳐 재사용할 수 있습니다.

Tailwind CSS 문서에서 간격에 대해 자세히 알아보세요.

Ruby on Rails 환경에서 Tailwind 설정

Ruby on Rails 7.x는 애플리케이션 생성기에서 Tailwind를 직접 지원합니다.

이 기사에 불필요한 복잡성을 추가하지 않기 위해 테스트 구성(-T)을 건너뛰겠습니다.

Tailwind에는 애플리케이션에 필요한 CSS 파일을 생성하는 깔끔한 기능이 있습니다. 다른 프레임워크에서는 프레임워크를 정의하는 전체 CSS 파일(사용하지 않는 부분도 포함)을 포함해야 합니다. 반면 Tailwind는 프로젝트를 스캔하고 프로젝트에 필요한 클래스만 포함된 CSS 파일을 생성합니다.

이를 위해서는 약간의 유틸리티를 실행해야 합니다. 개발 모드에서는 작업하는 동안 최신 상태를 유지하는 감시자 데몬(bin/rails tailwindcss:watch)을 실행할 수 있습니다. .

Procfile에 감시자 데몬을 추가할 수도 있습니다. , foreman를 사용하세요. 또는 overmind web 시작하려면 및 css 프로세스:

이제 간단한 랜딩 페이지에서 사용해 보겠습니다:

그런 다음 http://localhost:3000/landing/index로 이동할 수 있습니다.

랜딩 페이지 분석

모든 랜딩 페이지에는 제목이 필요합니다. Tailwind를 CSS 프레임워크로 사용하도록 애플리케이션을 구성했기 때문에 생성기가 작동합니다.

여기서는 표준 HTML처럼 보이는 것을 발견합니다. h1 태그에는 단 두 개의 클래스만 있습니다:

• font-bold :글꼴 두께를 제어합니다.
• text-4xl :글꼴 크기를 제어합니다.

text-4xl을 변경하면 text-xl로 페이지를 다시 로드하면 새 스타일이 자동으로 적용됩니다. Foreman이 실행 중인 터미널을 보면 Tailwind가 다시 백그라운드에서 스타일시트를 생성한 것을 볼 수 있습니다. 이것이 바로 Tailwind를 Ruby on Rails 애플리케이션에 통합하는 것이 얼마나 간단한지입니다(tailwindcss-rails gem에 의존함).

Ruby on Rails용 Tailwind 구성

config/tailwind.config.js을 편집할 수 있습니다 Tailwind의 설정을 조정하기 위한 파일입니다(예:추가 색상 추가, 사용할 글꼴 지정, 간격 조정 등).

예를 들어, 배경과 텍스트에 "구리" 색상을 추가할 수 있습니다:

음영은 도움이 되지만 대신 이름을 지정할 수 있습니다. 예를 들어 세 가지 음영만 필요한 경우 뷰의 숫자 대신 '밝음', '중간', '어두움'을 사용할 수 있습니다.

그런 다음 제목에 음영을 사용할 수 있습니다:

tailwindcss-rails gem의 README와 Tailwind CSS 문서에서 이에 대한 자세한 내용을 확인할 수 있습니다.

자산 파이프라인

우리는 bin/rails tailwindcss:watch가 어떻게 되는지 살펴보았습니다. 로컬 개발 모드에서 스타일시트를 계속 업데이트합니다. 스타일시트를 한 번만 작성해야 하는 경우 bin/rails tailwindcss:build를 사용할 수 있습니다. 대신.

프로덕션 용도로 사용하려면 bin/rails assets:precompile을 사용하세요. bin/rails tailwindcss:build에 직접 전화하려면 .

Ruby on Rails 애플리케이션용 자산 파이프라인에 대해 자세히 알아보세요.

Rails의 순풍

일부 보기(양식 및 반응형 탐색 메뉴)에서 Tailwind를 실제로 사용하는 몇 가지 방법을 살펴보겠습니다.

간단한 양식

Ruby on Rails 생성기를 사용하여 user를 생성합니다. 리소스:

그런 다음 users_controller.rb를 변경할 수 있습니다. 파일을 만들고 양식에 대한 보기를 만듭니다.

텍스트 색상, 배경 색상, 테두리, 패딩, 여백 등을 조정하여 각 부분의 스타일을 개별적으로 지정합니다. 여기서는 표준 Tailwind 외에는 아무것도 없지만 필요에 맞게 양식을 사용자 정의합니다.

반응형 탐색 표시줄

Tailwind의 유틸리티 클래스를 사용하여 브라우저의 최소 너비를 기반으로 조건부 중단점을 추가할 수 있습니다. 예를 들어, 다음 제목은 창 크기에 따라 색상이 변경됩니다:

기본적으로 색상은 어두운 회색 음영입니다. 브라우저 창의 너비가 640px에서 1024px 사이이면 청록색 음영입니다. 창 너비가 1024px보다 크면 보라색 음영으로 표시됩니다.

Tailwind에서는 열도 처리할 수 있으므로 다음은 창 크기에 따라 요소의 열 너비가 어떻게 변경되는지 보여주는 예입니다.

이 경우 "State" 레이블은 2~3개의 열에 걸쳐 있습니다.

여기에서는 Tailwind의 그리드 레이아웃 유틸리티를 사용하여 다음과 같은 그리드를 정의합니다.

• 기본적으로 1열 너비(grid-cols-1) )
• 폭이 640px 이상인 열 6개
• 너비 768px 이상인 8개의 열

중단점 및 너비:

• sm :640px
• md :768px
• lg :1024px
• xl :1280px
• 2xl :1536px

앞서 살펴본 것처럼 Tailwind는 페이지 디자인과 구성요소 스타일을 단순화합니다.

Tailwind와 다른 프레임워크

이제 Tailwind를 사용하는 방법을 이해했으므로 다른 프레임워크와의 주요 차이점을 검토해 보겠습니다.

• 유틸리티 기반: 우리는 각각 스타일의 서로 다른 부분에 초점을 맞춘 특정 CSS 클래스를 사용하여 각 요소의 스타일을 구성합니다.
• 필요한 정보 얻기: 우리는 웹사이트를 출시하는 데 필요한 부분만 가져오므로 로드 시간이 더 빨라집니다. 빌드 시간을 최적화합니다.
• 확장 가능: 간단한 구성 파일을 통해 TailwindCSS의 기본값을 확장하거나 사용자 정의할 수 있습니다.
• 쉬운 색상 음영: 예를 들어 호버 상황을 처리하기 위해 색상의 더 밝거나 어두운 음영을 만드는 방법을 알아낼 필요가 없습니다.
• 간단한 간격: 숨겨진 비례 배율은 간격을 단순화합니다.
• 덜 맞춤화된 CSS: 클래스를 스타일 요소로 조합하기만 하므로 맞춤 CSS에 덜 의존하고 HTML 파일과 스니펫을 사용하여 스타일(완전한 테마 포함)을 공유할 수 있습니다.
• Ruby on Rails 친화적: Tailwind gem 덕분에 모든 것이 레이아웃과 자산 파이프라인에 통합되었습니다.

마무리

앞서 살펴보았듯이 Tailwind의 유틸리티 우선 접근 방식은 Ruby on Rails에 매우 적합합니다. 복잡한 맞춤 구성이나 추가 맞춤 CSS를 추가하여 필요에 맞게 Tailwind를 조정하는 데 시간을 소비할 필요가 없습니다. 뷰와 부분 뷰를 구상하면서 Tailwind 유틸리티 클래스를 사용하여 뷰와 스타일을 형성하고 스타일을 지정할 수 있습니다.

더 자세히 알아보고 싶다면 Tailwind의 활발한 커뮤니티와 TailwindUI(Tailwind 제작자가 제공)와 같은 제품을 통해 바로 사용할 수 있는 다양한 템플릿과 구성 요소에 액세스할 수 있습니다.

즐거운 코딩 되세요!

추신 Ruby Magic 게시물이 보도되는 즉시 읽으려면 Ruby Magic 뉴스레터를 구독하고 단 하나의 게시물도 놓치지 마세요!

토마스 리불레

객원 저자인 Thomas는 프랑스에 거주하는 백엔드 컨설턴트이자 클라우드 인프라 엔지니어입니다. 그는 13년 넘게 스타트업 및 회사와 협력하여 팀, 제품 및 인프라를 확장해 왔습니다. 그는 또한 프랑스의 GNU/Linux 잡지와 그의 블로그에 여러 차례 게재되었습니다.

Thomas Riboulet의 모든 기사