Rise of Tailwind - 유틸리티 우선 CSS 프레임워크
9890 단어 csstailwindcss
예를 들어 다음 버튼을 다시 만들려면 다음을 사용할 수 있습니다.
<button class="bg-purple-700 text-white py-1 px-4">Button</button>
여기서 클래스는 tailwind에 의해 미리 빌드되어 다음 CSS를 제공합니다.
.bg-purple-700 {
background-color: #6b46c1;
}
.text-white {
color: #ffffff;
}
.py-1 {
padding-top: 0.25rem;
padding-bottom: 0.25rem;
}
.px-4 {
padding-top: 1rem;
padding-bottom: 1rem;
}
따라서 이 버튼을 얻기 위해 맞춤 CSS를 작성할 필요가 없습니다. 순풍을 제외하고는 다른 스타일이 필요 없이 전체 웹 애플리케이션을 구축하도록 크게 확장할 수 있습니다.
내가 좋아하는 Tailwind의 이점
데스크탑이 아닌 모바일에 무언가를 표시하려면 class
block md:hidden 를 추가하십시오. 이것이 모바일 우선 접근 방식이므로 해당 요소는 모바일에서 display: block 를 갖게 되며 md 중단점768px 이후에는 display: none 로 전환됩니다.유틸리티 클래스의 모든 것이 미리 정의되어 있으므로 플랫폼 전체에서 일관된 패딩과 여백을 갖게 됩니다. 그리고 순풍의 타이포그래피가 최고이며 아직 기본 구성을 변경할 필요가 없습니다.
앱에서 사용하지 않은 미사용 CSS를 제거하는 기능이 있습니다. tailwind에 내장된 purge css의 도움으로 이를 수행합니다. 이렇게 하면 최종 CSS 빌드에서 많은 크기를 절약할 수 있습니다.
뭔가를 구축하자...
이제 순풍이 어떻게 작동하는지 자세히 알아보기 위해 간단한 경고 구성 요소를 빌드해 보겠습니다. 터미널에 다음 명령을 입력하고 Node이 설치되어 있는지 확인하십시오.
mkdir tailwind-alert
cd tailwind-alert
npm init # Follow the steps to initialize a npm project
touch index.html postcss.config.js main.css
npm i -save tailwindcss postcss-cli
index.html , postcss.config.js 및 main.css 에서 다음 코드를 복사합니다.<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="tailwind.css" />
</head>
<body class="m-10">
<div role="alert">I'm an alert that informs you of stuff.</div>
</body>
</html>
// postcss.config.js
module.exports = {
plugins: [require("tailwindcss")],
};
/* main.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
마지막으로
package.json에 다음 스크립트를 추가합니다.// package.json
...
"scripts": {
"start": "postcss main.css -o tailwind.css --watch"
},
...
이제 터미널에서
npm start를 실행하고 브라우저에서 index.html를 열면 다음과 같이 표시됩니다.
순풍 스타일
순풍으로 스타일링하자! 일반적인 알림 구성 요소의 경우 배경색과 텍스트 색상을 먼저 지정해야 합니다. 따라서
index.html 에서 다음을 변경하십시오.<div class="bg-purple-200 text-purple-700" role="alert">I'm an alert that informs you of stuff.</div>
이제 모서리가 둥근 패딩을 추가해 보겠습니다. 패딩에는
p-{n} 유틸리티가 있고 border radius은 유틸리티 클래스와 함께 제공될 수도 있습니다.<div class="bg-purple-200 text-purple-700 py-2 px-4 rounded" role="alert">I'm an alert that informs you of stuff.</div>
이게 더 좋아보인다! 그러나 재사용성을 위해 이것을 구성 요소로 만들 수 있습니다.
main.css 파일에 다음 코드를 추가합니다./* main.css */
@tailwind base;
@tailwind components;
.alert {
@apply border-2 border-solid text-base rounded py-2 px-4;
}
.alert-primary {
@apply bg-purple-200 border-purple-200 text-purple-700;
}
@tailwind utilities;
@apply는 여기에서 tailwind 유틸리티 클래스를 쉽게 참조할 수 있도록 해주는 특수 tailwind 지시어입니다. 이제 브라우저에서 새로 고침index.html하면 다음과 같이 표시됩니다.
이제 이 경고 구성 요소를 모든 곳에서 사용할 수 있으며 한 곳에서 스타일을 변경할 수 있습니다. 순풍 클래스를 사용하고 있기 때문에 자체 CSS 스타일에 비해 간격, 색상 및 타이포그래피를 더 잘 제어할 수 있습니다.
결론
내 프로젝트에서 tailwind를 사용하고 있기 때문에 sass를 사용하거나 여러 스타일시트를 만들 필요가 없었습니다. 내가 필요한 모든 것은 순풍 그 자체 안에서 이루어질 수 있습니다.
내가 보는 몇 가지 단점:
Tailwind 팀이 앞으로 최선을 다해 이러한 문제를 해결하고 해결할 것이라고 확신합니다. official documentation을 확인하고 시작하십시오. 즐거운 코딩하세요!
Reference
이 문제에 관하여(Rise of Tailwind - 유틸리티 우선 CSS 프레임워크), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/skcript/rise-of-tailwind-a-utility-first-css-framework-24di텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
