반응형
Tailwind CSS는 클래스를 만들지 않고도 사용자 인터페이스를 신속하게 사용자 정의할 수 있는 클래스로 구성된 유틸리티 우선 CSS 프레임워크이다.
찬성
- 부모 및 자식 구성 요소의 클래스 이름이 중복되어 스타일 충돌 문제가 발생하는 것을 방지합니다.
- 프로젝트에서 스타일링 요소의 방향을 동일하게 지정합니다.
- CSS 파일의 컴파일 크기가 기존 스타일링보다 작습니다(나중에 Tailwind 최적화에 대한 기사를 작성할 예정이며 광고 에 따라 파일 크기가 작아졌으면 합니다).
Tailwind에 대해 이야기한 후, 우리의 프로젝트에 Tailwind를 설치하기 시작하겠습니다!
설치
- Angular CLI를 npm 또는 실과 함께 설치합니다.
// NPM
npm install -g @angular/cli
// Yarn
yarn add @angular/cli- Angular 프로젝트를 작성합니다.
ng new angular-tailwind
cd angular-tailwind- Tailwind CSS를 프로젝트에 추가하세요.
// NPM
npm install -D tailwindcss postcss autoprefixer
// Yarn
yarn add tailwindcss
// Create file Tailwind config
npx tailwindcss init- tailwind.config.js(패키지와 동일한 수준)에 일부 설정을 추가합니다.json ) ".src/*/"를 추가합니다.{now,ts}", 내용
module.exports = {
content: [
"./src/**/*.{html,ts}",
],
theme: {
extend: {},
},
plugins: [],
}- 주 스타일 시트에 Tailwind를 추가합니다(Angular 프로젝트를 작성할 때 스타일 구성을 선택하는 것은 다릅니다).
1.1 CSS로 스타일 선택
@tailwind base;
@tailwind components;
@tailwind utilities;1.2 SCSS 또는 기타로 스타일 선택
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';- 빌드 프로세스 시작
ng serve- 우리 HTML 코드에 테일윈드를 적용해보자. 만약 당신이 코드와 웹사이트의 아름다운 디스플레이를 실행할 수 있다면, 당신은 Tailwind를 프로젝트에 추가하는 것을 끝낸 것입니다. 하지만 Tailwind를 우리 프로젝트에 추가해야 한다면 코멘트로 알려주세요.
그러나 테일윈드 CSS는 여전히 결점을 가지고 있다.
반대
- 우리는 팀 간의 의사소통을 잘해야 합니다. 왜냐하면 우리는 요소를 스타일링하는 방법을 바꾸기 때문입니다.
- HTML 코드로 스타일이 섞여 있어 이해하기 어렵습니다.
- 색상, 간격, 크기 조정, 타이포그래피 등과 같은 테일윈드의 유틸리티 클래스에 대해 알아봅니다.
결론
Tailwind CSS는 스타일링 요소를 대체할 수 있는 방법이며 스타일링 충돌 문제를 제거하는 데 도움이 되며 디자인 시스템과 스타일링 요소를 만드는 데 걸리는 시간을 줄여줍니다.
보너스
사용된 테일윈드 효율성을 위한 확장을 설치합니다.
- InteliJ 제트브레인즈는 이미 테일윈드 CSS를 지원했다. 더 읽고 싶으시면 이 링크를 제공해 드렸습니다.
- VSCode 링크
내 코드.
리포지토리 : Github
뭔가 잘못됐거나, 불완전하거나, 경험을 공유하고 싶을 때. 댓글로 알려주세요.
시간을 내어 이 를 읽어 주셔서 감사합니다.
댓글