Tailwind CSS는 어떻게 사용합니까?

7828 단어 tailwindcsshtmlcsstutorial
프로젝트에서 Tailwind CSS를 사용할 수 있는 방법은 여러 가지가 있습니다. 예를 들어 CDN을 통해 주Tailwind CSS 파일을 포함하고 기본 유틸리티 클래스를 사용하여 요소를 구축하거나 패키지 관리자를 통해Tailwind CSS를 포함하는 것이 좋습니다.그 다음에 선택한 건축 도구 기술을 선택한 다음에Tailwind 프로필을 사용하여 파라미터를 쉽게 변경할 수 있고 심지어 추가 유틸리티 클래스를 추가할 수 있습니다.
이 설명서에서는 이 두 가지 방법을 설명하고 가장 유행하는 유틸리티 우선 CSS 프레임워크를 사용하는 방법을 보여 줍니다.

CDN을 통해 순풍 CSS 사용
추천하는 방법은 아니지만 CDN을 통해 이를 포함하면 Tailwind CSS의 많은 장점을 잃게 되지만, 더욱 높은 구축 도구와 설정을 깊이 연구하기 전에, 빠른 테스트 클래스와 실용 프로그램의 우선 방법을 충분히 이해할 수 있는 좋은 방법입니다.
HTML 템플릿의 <head> 태그에는 컴파일된 Tailwind CSS 파일을 끌어오는 스타일시트가 포함되어 있습니다.
<link href="https://unpkg.com/[email protected]^1.0/dist/tailwind.min.css" rel="stylesheet">
그런 다음 Tailwind CSS의 기본 유틸리티 클래스를 사용할 수 있습니다.유틸리티 클래스를 사용하여 템플릿에 다음 HTML 태그를 추가합니다.
<button class="bg-teal-500 hover:bg-teal-600 focus:outline-none focus:shadow-outline py-2 px-3 text-white rounded-sm">
    Sign Up
</button>
각 과목의 뜻을 분해해 봅시다.

  • bg-teal-500 - 버튼
    • 의 배경에 파란색 추가

  • 정지:bg-teal-600 -
    • 에 정지할 때 단추의 배경색을 약간 어둡게 합니다

  • focus:outline none(초점:윤곽 없음) - 버튼이 초점을 맞출 때 기본 브라우저 윤곽 스타일
    • 을 비활성화합니다.

  • 초점:그림자 윤곽 -
    • 에 초점을 맞출 때 단추에 그림자 윤곽 추가

  • py-2 - Y축(위쪽 및 아래쪽)에 채우기
    • 추가

  • px-3-X축(왼쪽 및 오른쪽)에 충전
    • 추가

  • 텍스트 흰색 - 버튼 안의 텍스트를 흰색으로

  • 원형sm-버튼
    • 에 작은 테두리 반경 추가
    왜 이렇게 많은 수업과 바쁜 버튼이 있는지 지금 물어볼지도 몰라요.클래스에만 추가하려면, 예를 들어 .btn, 그리고 CSS 파일에 클래스를 추가하는 것이 좋지 않습니까?네, 아니에요.
    만약 전체 항목에 몇 가지 종류의 단추만 있다면, 단추에 한 종류만 설정하는 것은 절대적으로 좋은 것입니다. 그리고 색깔이나 크기를 바꾸기 위해 몇 가지 종류를 설정하십시오.
    그러나 만약 프로젝트가 매우 크고 다양하다면, 많은 경우, 단추를 약간 크거나 작거나, 한 위치나 두 위치에서만 색을 사용해야 할 수도 있습니다.
    이러한 경우, 유틸리티를 우선적으로 사용하는 방법은 매우 유리하다. 왜냐하면 CSS 파일에서 하나의 단추에 추가 클래스를 만들 필요가 없기 때문이다.
    위의 예에서 py-3 또는 px-4을 사용하면 단추를 더 크게 만들 수 있습니다. 다른 종류를 만들어서 더 큰 종류의 단추를 만들 필요가 없습니다.간단하게 말하면 이런 개발 속도가 더 빠르다.
    홈페이지에서 documentation of these utility classes을 보고 HTML 템플릿에서 사용하는 것이 좋습니다.

    패키지 관리자를 통해 Tailwind CSS 사용
    일반적으로 항목과 라이브러리에 의존하는 모든 항목에 대해 패키지 관리자를 사용하는 것을 권장합니다.가장 인기 있는 프런트엔드 패키지 관리자는 NPM이므로 도입할 때 사용하는 것이 좋습니다.계속하기 전에 컴퓨터에 Node 및 NPM이 설치되어 있는지 확인하십시오.package.json 파일이 없는 경우 구성 파일을 시작하려면 터미널에서 다음 명령을 실행해야 합니다.
    npm init
    제목, 작성자, 버전 등과 같은 항목에 대한 정보를 추가하라는 메시지가 표시됩니다.테스트 목적으로 "당신의 방식을 입력하십시오".
    그런 다음 다음 다음 명령을 실행하여 Tailwind CSS를 로컬에 설치합니다.
    npm install tailwindcss

    CSS에 순풍 추가
    로컬 main.css 파일을 만들고 @tailwind를 사용하여tailwind의 기본, 구성 요소, 유틸리티 스타일을 CSS에 주입합니다.
    @tailwind base;

@tailwind components;

@tailwind utilities;
    파일을 구성할 때 이러한 명령은 Tailwind의 실제 CSS 코드와 교환됩니다.

    순풍 프로필 만들기
    Tailwind의 유틸리티 클래스를 사용자 정의하려면 Tailwind 구성 파일을 사용하는 것이 좋습니다.예를 들어, 색상, 크기, 반지름, 그림자, 글꼴 패밀리 등을 쉽게 변경하려는 경우 쉽게 변경할 수 있습니다.
    Tailwind CLI를 사용하여 터미널에서 다음 명령을 실행하여 구성 파일을 생성합니다.
    npx tailwindcss init
    이렇게 하면 다음과 같은 컨텐트가 포함된 템플릿 파일이 작성됩니다.
    // tailwind.config.js
module.exports = {
    future: {},
    purge: [],
    theme: {
    extend: {},
    },
    variants: {},
    plugins: [],
}
    이 설명서의 빌드 툴 섹션을 마치면 이 파일로 돌아가 기존 클래스의 색상 및 기타 속성을 업데이트하는 방법과 로컬 Tailwind CSS 구성에 새 클래스를 추가하는 방법을 보여줍니다.

    순풍 CSS 처리
    Tailwind CSS를 로컬로 구성하는 마지막 단계입니다.체인을 구성하는 tailwind.config.js 파일에 다음 두 플러그인을 추가합니다.
    module.exports = {
    plugins: [
        // ...
        require('tailwindcss'),
        require('autoprefixer'),
        // ...
    ]
}
    간단한 프로젝트의 경우 터미널에서 다음 명령을 실행하여 설정된 순풍 구성을 처리할 수 있습니다.
    npx tailwindcss build main.css -o output.css
    main.css 파일이 가져오기 명령의 파일이고 HTML 템플릿에 output.css 파일이 있는지 확인합니다.프로젝트에 포함해야 하는 CSS는 output.css이지 main.css이 아니다.

    프로파일 사용
    기본적으로 Tailwind는 항상 tailwind.config.js 파일을 먼저 찾고 사용자가 설정한 매개 변수를 고려합니다.이 파일에서 색상, 크기, 간격, 글꼴 패밀리 등과 같은 기존 유틸리티 클래스의 값을 변경할 수 있습니다.기존 클래스에 추가 클래스를 추가할 수도 있습니다.
    몇 가지 간단한 용법 예시를 살펴보자.흔히 볼 수 있는 것부터 글꼴 시리즈를 바꾸자.

    글꼴 패밀리 변경
    우선, 당신의 프로젝트에 새로운 글꼴 시리즈를 추가해야 합니다.우리는 구글 글씨체를 사용하는 것을 건의합니다."Nunito"글꼴 시리즈를 좋아하므로 Google Fonts을 선택한 후 HTML 템플릿에 추가합니다.
    <link href="https://fonts.googleapis.com/css2?family=Nunito&display=swap" rel="stylesheet">
    그런 다음 글꼴을 포함하여 tailwind.config.js 파일로 이동하여 [주제] 키 값에 다음 옵션을 추가해야 합니다.
    module.exports = {
    future: {
        // removeDeprecatedGapUtilities: true,
        // purgeLayersByDefault: true,
    },
    purge: [],
    theme: {
        fontFamily: {
        sans: ['Nunito', 'sans-serif'],
        display: ['Nunito', 'sans-serif'],
        body: ['Nunito', 'sans-serif'],
        },
        extend: {},
    },
    variants: {},
    plugins: [
        require('tailwindcss'),
        require('autoprefixer'),
    ],
}
    이제 후풍 구성 파일을 처리하는 명령을 실행합니다.
    npx tailwindcss build styles.css -o output.css
    이제 브라우저에서 HTML 템플릿을 볼 때 글꼴이 변경된 것을 볼 수 있습니다.

    사용자 정의 색상 추가
    거의 불가피하게, 당신은 프로젝트에 브랜드 색채를 바꾸거나 추가해야 한다.Tailwind CSS의 구성 파일을 사용하면 매우 간단합니다.다음과 같이 구성 파일의 확장 객체에 새 색상의 키 값 쌍을 추가합니다.
    extend: {
    colors: {
        primary: '#EA755E',
    }
}
    현재 생성된 버튼의 bg-teal-500 및 hover:bg-teal-500 클래스를 bg-primary 및 hover:bg-primary으로 변경했습니다.터미널에서 명령을 실행해서 미풍을 처리하고, 브라우저를 보면 단추가 새로 추가된 색을 어떻게 사용하는지 볼 수 있습니다.
    '순풍호'의 가장 좋은 점은 새로운 색깔이 현재 배경색뿐만 아니라 텍스트, 음영 등의 색깔도 바꿀 수 있다는 점이다.

    구성 도구 예
    설정 파일의 일부 내용을 변경할 때마다 터미널에서 사용자 정의Tailwind processing 명령을 실행하면 번거로움과 역효과를 가져올 수 있습니다.이것이 바로 건축 공구가 작용하는 곳이다.공식 문서에는 Webpack, Gulp, Laravel Mix 등 가장 유행하는 구축 도구가 있습니다.문서의 officially supported build tools을 참조하십시오.
    creating an account at Themesberg을 통해 인터넷 개발자 5489명이 사용하는 무료 템플릿과 테마를 획득했다.
    KubeWeekly #204
    Nginx 부하 균형 상세 설명

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage