Tailwindcss: 가장 강력하고 인기 있는 CSS 프레임워크

이 기사에서는 Tailwindcss에 대해 설명했습니다. CSS의 강력한 프레임워크입니다. 시장에는 Bootstrap, Tailwindcss, Materialize CSS 등과 같은 많은 CSS 프레임워크가 있습니다.

Tailwind는 다른 모든 사람들에게 가장 인기 있고 가벼운 CSS 프레임워크입니다.

Tailwindcss를 사용하는 이유:

기본 테마 없음

취소하기 위해 싸워야 하는 디자인 결정을 강요하지 않음

고유한 아이덴티티가 있는 맞춤형 디자인을 구현하는 유리한 시작을 제공합니다

사이트 구축에 사용할 미리 디자인된 위젯 메뉴가 함께 제공됩니다

.



프로젝트에 스타일을 가져오고 npm 설치와 함께 tailwindcss를 사용하는 또 다른 방법을 통해 CDN 링크와 함께 tailwindcss를 사용할 수 있습니다.

CDN 링크

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">

Tailwindcss Directives을 프로젝트로 가져오면 많은 단점이 있습니다. Tailwindcss 지시문을 가져올 때 일부 tailwindcss 사용자 지정을 수행할 수 없습니다.

CDN은 웹 사이트와 상호 작용하는 데 많은 시간이 걸립니다.

HTML 문서로 스타일을 가져오고 렌더링하는 데 많은 시간이 걸립니다.

기본 tailwindcss 파일에서 사용하지 않는 스타일을 제거할 수 없습니다.

CDN을 가져와 일부 특수features of tailwindcss를 사용할 수 없습니다.

NPM을 사용하는 TailwindCss

NPM에서 설치하여 tailwindcss를 사용하면 많은 이점이 있습니다.

더 적은 스타일을 로드하기 위해 프로젝트에서 원치 않는 css를 제거할 수 있으며 이는 렌더링 문서에 영향을 미칩니다.

일반 HTML 요소에 적용할 지시문을 만들 수 있습니다.

tailwindcss.config.js를 사용하여 어둡고 밝은 테마를 사용자 정의할 수 있습니다.

구성 파일을 사용자 정의하여 일부 특수 색상 및 글꼴을 추가할 수 있습니다.
개인적으로 CDN을 통해 스타일을 가져오는 것보다 npm을 사용하여 tailwindcss를 사용하는 것을 추천합니다.

NPM을 사용하여 Tailwindcss를 설정해 봅시다.

폴더 경로에서 다음 명령을 실행합니다.

npm i tailwindcss

프로젝트에서 원하지 않는 스타일을 제거하려면 더 많은 패키지를 설치해야 합니다.

npm i autoprefixer postcss postcss-cli

이제 tailwindcss 파일 및 구성 파일을 설정하는 방법을 설명하겠습니다.
tailwind.config.js 를 생성해 봅시다. 다음 명령을 실행합니다.

npx tailwindcss init

이제 다음 명령을 실행하여 postcss.config.js 파일을 생성합니다.

npx tailwindcss init -p

이제 public/css 폴더를 만들고 css 폴더 안에 tailwind.style 이름 파일을 만들고 이 코드를 추가합니다.

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

package.json에 새 스크립트를 추가하여 tailwindcss 지시문을 스타일로 컴파일합니다.

"build": "postcss ./public/css/tailwind.css -o ./public/css/style.css -w"

npm run build tailwindcss를 실행하면 public/css 내에 style.css가 자동으로 생성됩니다.

빌드 스크립트를 실행하기 전에 JIT 컴파일러를 설정해야 합니다.

이제 가장 중요한 단계는 tailwind.config.js에서 JIT 컴파일러를 정의해야 한다는 것입니다.

다음과 같이 JIT 컴파일러를 설정해야 합니다.

module.exports = {
    mode: 'jit',
    purge: [
        './views/**/*.ejs',
        './views/*.ejs',
        './public/**/*.html',
        './public/*.html'
    ],
    darkMode: false,
    theme: {
        extend: {
            fontFamily: {},
            colors: {}
        }
    },
    variants: {
        extend: {},
    },
    plugins: [],
}

위의 코드에서 purge를 정의할 때 해당 purge 배열에서 스타일을 적용한 파일을 정의하거나 HTML 요소의 클래스를 말할 수 있습니다. 따라서 빌드 스크립트가 실행 중일 때 postcss 패키지는 public/css/style.css에서 원하지 않는 스타일을 자동으로 제거하고 원하는 스타일도 추가합니다.

이제 빌드 스크립트를 쉽게 실행할 수 있습니다.

npm run build

C++ 프로그램을 사용하여 Tailwindcss 설정

노드 및 익스프레스 프로젝트로 tailwindcss를 생성하는 C++ 프로그램을 만들었습니다.

내 Github Repository를 확인할 수 있습니다.

많은 시간을 절약할 수 있으며 모든 폴더와 파일을 설정하기 위해 아무것도 할 필요가 없습니다. 저장소에서 해당 파일program.exe을 실행하기만 하면 됩니다.

테일블록

Tailblocks은 tailwindcss를 사용하여 내장 템플릿을 가져오는 웹사이트입니다. 웹 사이트에서 해당 구성 요소를 직접 복사할 수 있습니다.

결론

Tailwind는 가장 널리 사용되는 프레임워크입니다. Tailwindcss는 부트스트랩 대신 tailwindcss를 사용하여 프로젝트를 더 많이 사용자 지정할 수 있기 때문에 부트스트랩보다 낫습니다. 부트스트랩보다 더 많은 기능이 있습니다. 다른 것보다 Tailwind를 사용하는 것이 좋습니다. 더 많은 기능과 documentation 웹 사이트에서 확인할 수 있습니다.