Tailwind CSS를 사용하여 멋진 웹사이트를 빠르게 개발하는 방법

개발자로 발전함에 따라 적은 코드를 작성하여 더 많은 작업을 수행하는 데 도움이 되는 기술을 사용할 가능성이 높아집니다. Tailwind CSS와 같은 견고한 프론트엔드 프레임워크는 이를 달성하는 한 가지 방법입니다.

이 기사에서는 웹 페이지를 만들고 디자인하는 데 도움이 되는 CSS 프레임워크인 Tailwind CSS에 대해 알아보겠습니다. 프로젝트에 Tailwind CSS를 설치 및 통합하는 방법, 실용적인 응용 프로그램 및 사용자 지정 스타일 및 플러그인을 만드는 방법을 설명하는 것으로 시작하겠습니다.

흥분한? 의 시작하자!

Tailwind CSS란 무엇입니까?

Tailwind CSS는 마크업에서 직접 웹 페이지를 만들고 디자인하는 데 사용할 수 있는 미리 정의된 클래스가 있는 유틸리티 우선 CSS(Cascading Style Sheets) 프레임워크입니다. 미리 정의된 클래스 형식으로 HTML에 CSS를 작성할 수 있습니다.

Tailwind CSS가 무엇인지 더 잘 이해할 수 있도록 프레임워크가 무엇이며 "유틸리티 우선 CSS"가 무엇을 의미하는지 정의하겠습니다.

프레임워크란 무엇입니까?

일반적인 프로그래밍 용어로, 프레임워크는 이미 존재하는 도구의 기능에서 구축된 재사용 가능하고 기성품 구성 요소를 제공하는 도구입니다. 프레임워크를 만드는 전반적인 목적은 작업을 줄여 개발 속도를 높이는 것입니다.

이제 프레임워크의 의미를 설정했으므로 Tailwind CSS가 CSS 기능을 기반으로 구축된 도구라는 것을 이해하는 데 도움이 될 것입니다. 프레임워크의 모든 기능은 클래스로 구성된 CSS 스타일에서 파생되었습니다.

유틸리티 우선 CSS 프레임워크란 무엇입니까?

유틸리티 우선 CSS라고 할 때 미리 정의된 기능이 있는 마크업(HTML)의 클래스를 참조합니다. 이는 미리 정의된 스타일이 첨부된 클래스만 작성하면 되며 해당 스타일이 요소에 적용됨을 의미합니다.

바닐라 CSS(프레임워크나 라이브러리가 없는 CSS)로 작업하는 경우 먼저 요소에 클래스 이름을 지정한 다음 해당 클래스에 다른 속성과 값을 추가하면 요소에 스타일이 적용됩니다. .

예를 보여드리겠습니다. 여기에서 모서리가 둥근 버튼과 "Click me"라는 텍스트가 있는 버튼을 만듭니다. 버튼의 모양은 다음과 같습니다.

먼저 바닐라 CSS를 사용하여 이 작업을 수행한 다음 Tailwind CSS에서 사용할 수 있는 유틸리티 클래스를 사용합니다.

바닐라 CSS로

 <button class="btn">Click me</button>

우리는 외부 스타일시트를 사용하여 스타일이 지정될 btn 클래스를 버튼 태그에 지정했습니다. 그건:

 .btn { background-color: #000; color: #fff; padding: 8px; border: none; border-radius: 4px; }

Tailwind CSS 사용

 <button class="bg-black p-2 rounded">Click me</button>

이것은 모두 바닐라 CSS를 사용한 예제와 동일한 효과를 얻기 위해 필요합니다. 우리가 사용한 각 클래스 이름에는 이미 미리 정의된 스타일이 있기 때문에 스타일을 작성해야 하는 외부 스타일시트가 생성되지 않았습니다.

Tailwind CSS를 사용하기 위한 전제 조건

Tailwind CSS를 사용하기 전에 프레임워크의 기능을 어려움 없이 사용하기 위해 충족해야 하는 몇 가지 전제 조건이 있습니다. 다음은 그 중 몇 가지입니다.

• HTML, 그 구조 및 작동 방식에 대한 좋은 지식
• CSS의 견고한 기초 — 미디어 쿼리, 플렉스박스 및 그리드 시스템

Tailwind CSS는 어디에 사용할 수 있습니까?

React.js, Next.js, Laravel, Vite, Gatsby 등과 같은 JavaScript 프레임워크를 비롯한 프런트엔드 웹 프로젝트에서 Tailwind CSS를 사용할 수 있습니다.

Tailwind CSS의 장단점

Tailwind CSS를 사용하면 다음과 같은 이점이 있습니다.

1. 더 빠른 개발 프로세스
2. 유틸리티가 유사하므로 CSS를 더 많이 연습할 수 있습니다.
3. 모든 유틸리티 및 구성 요소를 쉽게 사용자 지정할 수 있습니다.
4. 프로덕션을 위한 전체 파일 크기는 일반적으로 작습니다.
5. CSS를 이미 알고 있다면 배우기 쉬움
6. 학습을 위한 좋은 문서

Tailwind CSS 사용의 몇 가지 단점은 다음과 같습니다.

1. 모든 스타일이 HTML 파일에 있기 때문에 대규모 프로젝트의 경우 마크업이 정리되지 않은 것처럼 보일 수 있습니다.
2. CSS를 잘 이해하지 못하면 배우기가 쉽지 않습니다.
3. 입력 요소를 포함하여 처음부터 모든 것을 빌드해야 합니다. Tailwind CSS를 설치하면 모든 기본 CSS 스타일이 제거됩니다.
4. Tailwind CSS는 웹사이트의 프론트엔드 개발에 소요되는 시간을 최소화하고 주로 백엔드 로직에 집중하려는 경우 최선의 선택이 아닙니다.

Tailwind CSS를 사용하는 경우

Tailwind CSS는 코드를 적게 작성하여 개발 프로세스의 속도를 높이는 데 가장 적합합니다. 패딩, 간격 등과 같은 다양한 디자인 요구 사항에서 일관성을 유지하는 데 도움이되는 디자인 시스템과 함께 제공됩니다. 이것으로 당신은 당신의 디자인 시스템을 만드는 것에 대해 걱정할 필요가 없습니다.

또한 Tailwind CSS를 사용하면 구성 요소(탐색 막대, 버튼, 양식 등)를 항상 같은 방식으로 사용하지 않아도 되므로 쉽게 구성할 수 있는 프레임워크를 사용할 수 있습니다. 구성 요소의 모양을 선택할 수 있습니다. 그러나 CSS를 배우고 연습하지 않은 경우 Tailwind를 사용해서는 안됩니다.

Tailwind CSS와 다른 CSS 프레임워크 간의 유사점 및 차이점

다음은 몇 가지 유사점입니다.

1. 작업을 더 빨리 완료할 수 있도록 도와줍니다.
2. 미리 정의된 클래스와 함께 제공됩니다.
3. CSS 규칙을 기반으로 구축되었습니다.
4. 둘 다 CSS에 대한 실무 지식이 있으면 배우고 사용하기 쉽습니다.

이제 몇 가지 차이점을 살펴보겠습니다.

1. Tailwind는 구성 요소를 만들어야 하기 때문에 대부분의 프레임워크와 다릅니다. 예를 들어 Bootstrap에는 탐색 모음, 버튼 등과 같은 구성 요소가 있지만 Tailwind를 사용하면 이 모든 것을 직접 구축해야 합니다.
2. Bootstrap과 같은 일부 프레임워크는 쉽게 사용자 정의할 수 없으므로 해당 디자인 패턴을 사용해야 합니다. Tailwind에서는 모든 것의 흐름을 제어합니다.
3. Tailwind를 사용하려면 CSS에 대한 심층적인 지식이 필요합니다. 클래스 이름을 작성하는 것만으로는 충분하지 않습니다. 동일한 결과를 얻기 위해 바닐라 CSS를 작성하는 것처럼 이들을 결합해야 하기 때문입니다. 대부분의 다른 프레임워크에서 알아야 할 것은 클래스 이름을 사용할 때 어떤 구성 요소가 만들어지는지뿐입니다.

Tailwind CSS 사용을 시작하는 방법

Tailwind CSS를 설치하고 프로젝트에 통합하기 전에 다음을 확인하세요.

1. 터미널에서 노드 패키지 관리자(npm)를 사용하기 위해 컴퓨터에 Node.js가 설치되어 있습니다.
2. 프로젝트는 생성된 파일로 모두 설정됩니다.

현재 프로젝트 구조는 다음과 같습니다.

 -Tailwind-tutorial -public -index.html -styles.css -src -styles.css

다음으로 프로젝트의 터미널을 시작하고 다음 명령을 실행합니다.

 npm install -D tailwindcss

위의 명령은 Tailwind CSS 프레임워크를 종속성으로 설치합니다. 다음으로 아래 명령을 실행하여 tailwind.config.js 파일을 생성합니다.

 npm install -D tailwindcss

tailwind.config.js 파일은 생성될 때 비어 있으므로 몇 줄의 코드를 추가해야 합니다.

 module.exports = { content: ["./src/**/*.{html,js}", "./public/*.html"], theme: { extend: {}, }, plugins: [], };

콘텐츠 배열에 제공된 파일 경로를 통해 Tailwind는 빌드 시간 동안 사용하지 않는 스타일을 제거/제거할 수 있습니다.

다음으로 해야 할 일은 src 폴더의 CSS 파일에 "@tailwind" 지시문을 추가하는 것입니다. 여기서 Tailwind가 미리 정의된 모든 유틸리티 스타일을 생성합니다.

 @tailwind base; @tailwind components; @tailwind utilities;

마지막으로 할 일은 터미널에서 다음 명령을 실행하여 빌드 프로세스를 시작하는 것입니다.

 npx tailwindcss -i ./src/styles.css -o ./public/styles.css --watch

위의 코드에서 우리는 입력 파일이 src 폴더의 스타일시트이고 우리가 사용한 모든 스타일이 공용 폴더의 출력 파일에 내장되어야 한다고 Tailwind에 알려줍니다. --watch 를 사용하면 Tailwind에서 자동 빌드 프로세스의 변경 사항에 대해 파일을 감시할 수 있습니다. 생략한다는 것은 코드를 빌드하고 원하는 출력을 보고 싶을 때마다 해당 스크립트를 실행해야 한다는 것을 의미합니다.

Tailwind CSS 사용

이제 프로젝트에 Tailwind CSS를 설치하고 설정했으므로 해당 응용 프로그램을 완전히 이해하기 위한 몇 가지 예를 살펴보겠습니다.

플렉스박스 예

Tailwind CSS에서 flex를 사용하려면 flex 클래스를 추가한 다음 flex 항목의 방향을 추가해야 합니다.

 <div class="flex flex-row"> <button> Button 1 </button> <button> Button 2 </button> <button> Button 3 </button> </div>

flex-row-reverse 를 사용하면 버튼이 표시되는 순서가 반대로 됩니다.

flex-col 그것들을 서로 위에 쌓습니다. 다음은 예입니다.

 <div class="flex flex-col"> <button> Button 1 </button> <button> Button 2 </button> <button> Button 3 </button> </div>

이전 예와 마찬가지로 flex-col-reverse 는 순서를 반대로 합니다.

그리드 예

그리드 시스템에서 열과 행을 지정할 때 요소가 사용 가능한 공간을 차지하는 방식을 결정하는 숫자를 전달하여 다른 접근 방식을 취합니다.

 <div class="grid grid-cols-3"> <button> Button 1 </button> <button> Button 2 </button> <button> Button 3 </button> <button> Button 4 </button> <button> Button 5 </button> <button> Button 6 </button> </div>

그림 물감

Tailwind에는 미리 정의된 많은 색상이 있습니다. 각 색상에는 다양한 변형 세트가 있으며 가장 밝은 변형은 50이고 가장 어두운 변형은 900입니다.

다음은 이를 설명하기 위한 여러 색상과 해당 HTML 16진 코드의 그림입니다.

버튼 요소에 배경색을 지정하기 위해 위의 빨간색을 사용하여 이 작업을 수행하는 방법의 예를 제공합니다.

 <button class="bg-red-50">Click me</button> <button class="bg-red-100">Click me</button> <button class="bg-red-200">Click me</button> <button class="bg-red-300">Click me</button> <button class="bg-red-400">Click me</button> <button class="bg-red-500">Click me</button> <button class="bg-red-600">Click me</button> <button class="bg-red-700">Click me</button> <button class="bg-red-800">Click me</button> <button class="bg-red-900">Click me</button>

이 구문은 동일한 방식으로 작성되지만 숫자를 사용하지 않는 bg-black 및 bg-white 를 제외하고 Tailwind의 모든 색상에 대해 동일합니다.

텍스트 색상을 추가하려면 text-{color} 클래스를 사용합니다.

 <p class="text-yellow-600">Hello World</p>

심

Tailwind에는 설계 전반에 걸쳐 일관된 규모를 유지하는 데 도움이 되는 설계 시스템이 이미 있습니다. 각 유틸리티를 적용하기 위한 구문만 알면 됩니다.

다음은 요소에 패딩을 추가하기 위한 유틸리티입니다.

• p 는 전체 요소의 패딩을 나타냅니다.
• py 는 padding-top 및 padding-bottom을 나타냅니다.
• px 는 왼쪽 여백과 오른쪽 여백을 나타냅니다.
• pt 는 패딩 상단을 나타냅니다.
• pr 은 오른쪽 여백을 나타냅니다.
• pb 는 패딩 하단을 나타냅니다.
• pl 은 패딩 왼쪽을 나타냅니다.

요소에 적용하려면 Tailwind에서 제공하는 적절한 숫자를 사용해야 합니다. 이는 마지막 섹션에서 색상 변형을 나타내는 숫자와 약간 유사합니다. 우리가 의미하는 바는 다음과 같습니다.

 <button class="p-0">Click me</button> <button class="pt-1">Click me</button> <button class="pr-2">Click me</button> <button class="pb-3">Click me</button> <button class="pl-4">Click me</button>

여유

패딩 및 여백에 대해 미리 정의된 유틸리티는 매우 유사합니다. p 를 m 으로 바꿔야 합니다.

• m
• my
• mx
• mt
• mr
• mb
• ml

Tailwind CSS 플러그인을 만드는 방법

Tailwind CSS에는 이미 구축된 많은 유틸리티와 디자인 시스템이 있지만 Tailwind를 사용할 수 있는 범위를 확장하기 위해 추가하려는 특정 기능이 있을 수 있습니다. Tailwind CSS를 사용하면 플러그인을 만들어 이를 수행할 수 있습니다.

물색을 추가하는 플러그인과 X축에서 요소를 150도 회전하는 회전 유틸리티를 만들어 손을 더럽히자. 약간의 JavaScript를 사용하여 tailwind.config.js 파일에서 이러한 유틸리티를 만들 것입니다.

 const plugin = require("tailwindcss/plugin"); module.exports = { content: ["./src/**/*.{html,js}", "./public/*.html"], theme: { extend: {}, }, plugins: [ plugin(function ({ addUtilities }) { const myUtilities = { ".bg-aqua": { background: "aqua" }, ".rotate-150deg": { transform: "rotateX(150deg)", }, }; addUtilities(myUtilities); }), ], };

이제 이것을 분해해 보겠습니다. 우리가 가장 먼저 한 일은 Tailwind의 플러그인 기능을 가져오는 것이었습니다.

 const plugin = require("tailwindcss/plugin");

그런 다음 우리는 플러그인 배열에 플러그인을 생성했습니다.

 plugins: [ plugin(function ({ addUtilities }) { const newUtilities = { ".bg-aqua": { background: "aqua" }, ".rotate-150deg": { transform: "rotateX(150deg)", }, }; addUtilities(newUtilities); }), ],

플러그인을 만든 후 빌드 스크립트를 다시 실행해야 할 수도 있습니다.

이제 플러그인이 준비되었으므로 테스트할 수 있습니다.

 <button class="bg-aqua rotate-150deg">Click me</button>

모든 작업을 올바르게 수행했다면 텍스트가 X축에서 150도로 회전된 아쿠아 색상의 버튼이 있어야 합니다.

요약

프레임워크는 워크플로 속도를 높이는 데 있어 매우 중요한 옵션입니다. 디자인의 일관성을 유지하면서 보기 좋고 전문적인 웹 페이지를 구축하는 데 도움이 됩니다. Tailwind CSS는 웹 디자인 및 개발 수준을 한 단계 끌어올리는 데 도움이 되는 많은 유틸리티 포워드 CSS 클래스를 제공합니다.

이 기사에서는 Tailwind CSS가 무엇이고 이를 프레임워크로 만드는 요소에 대해 설명했습니다. 그런 다음 설치 프로세스를 살펴보고 기존 기능을 확장하기 위해 사용자 지정 플러그인을 만드는 방법을 보여주는 몇 가지 예를 보았습니다.

이 지점까지 따라왔다면 이제 Tailwind의 작동 방식에 대한 기본적이지만 확실한 이해를 갖게 된 것입니다. 그러나 이러한 유틸리티 우선 프레임워크를 더 잘 사용하려면 아직 탄탄한 기초가 없는 경우 계속 연습하고 CSS에 대한 지식을 늘려야 합니다.

과거에 Tailwind CSS 또는 다른 CSS 프레임워크를 사용한 적이 있습니까? 의견 섹션에서 생각을 공유하십시오!