Tailwind와의 첫 실제 접촉.

당신은 일종의 새로운 webdev입니까? 거의 모든 큰 CSS 파일의 혼란에 지치셨습니까? Tailwindcss라는 완벽한 제품이 있으니 두려워하지 마세요. 이제 나는 당신의 우려를 이해할 수 있습니다. 내가 말하는 이 것에는 여전히 이름에 css가 있지만 두려워하지 마십시오. Tailwindcss 경로를 따라가면 별도의 스타일시트를 다시 만들 필요가 없습니다*. 이 튜토리얼은 시작하는 데 도움이 될 것입니다.

시작하는 방법.

먼저 터미널에 이것을 입력하십시오.

npm install -D tailwindcss

그런 다음 이것도 터미널에 있습니다.

npx tailwindcss init

app.css라는 파일을 보게 될 것입니다. 이것을 넣으십시오.

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

이것을 터미널에 넣으십시오.

npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

그리고 짜잔.

단테, 내가 방금 뭘 했는지 모르겠어.

아, 제가 자세히 설명하는 걸 잊었나 봐요. 그러나 Tailwind는 일단 작업을 시작하면 매우 직관적이므로 걱정할 필요가 없습니다. 시작하기 전에 알아야 할 유일한 사항은 클래스 매개변수로 스타일에 영향을 미친다는 것입니다.

이제 여기에 예가 있습니다.

보시다시피 이 링크에는 몇 가지 스타일 속성이 있습니다. font-semibold, text-sm, border 등과 같이 많은 것들이 매우 명확합니다. 일부는 약간의 설명이 필요합니다. px-4와 마찬가지로 이 요소는 x축에 4개의 패딩이 있음을 의미합니다. 또한 순풍의 1 "단위"는 0.25 rem과 같습니다. 따라서 px-4는 요소에 왼쪽과 오른쪽에 하나의 패딩이 있음을 의미합니다.

마지막 메모

Tailwind에는 좋은 문서가 있으며 작업을 좋아한다면 여기에서 확인하는 것이 좋습니다. https://tailwindcss.com/docs/utility-first

이제 순풍 스타터 튜토리얼을 마칩니다. 나는 이것을 읽는 누군가가 이것에서 무언가를 빼앗을 수 있기를 바랍니다. 그리고 코딩의 길을 가는 모든 사람에게 행운이 있기를 바랍니다.