Tailwind CSS 프로젝트를 처음부터 설정하기-CSS 튜토리얼-php.cn

Tailwind CSS 프로젝트를 처음부터 설정하기

WBOY

풀어 주다： 2024-08-08 15:03:49

원래의

1021명이 탐색했습니다.

Setting Up a Tailwind CSS Project from Scratch

Tailwind CSS 프로젝트를 처음부터 설정하기

Tailwind CSS는 스타일에 대한 유틸리티 우선 접근 방식으로 인해 개발자들 사이에서 인기 있는 선택이 되었습니다. 사용자 정의 CSS를 작성하지 않고도 웹 애플리케이션을 디자인할 수 있는 고도로 사용자 정의 가능하고 효율적인 방법을 제공합니다. 이 가이드에서는 Tailwind CSS 프로젝트를 처음부터 설정하는 과정을 안내해 드립니다.

Tailwind CSS 소개

Tailwind CSS는 마크업에서 직접 맞춤형 디자인을 구축할 수 있도록 하위 수준 유틸리티 클래스를 제공하는 유틸리티 우선 CSS 프레임워크입니다. Bootstrap이나 Foundation과 같은 기존 CSS 프레임워크와 달리 Tailwind에는 미리 디자인된 구성요소가 제공되지 않습니다. 대신 HTML을 벗어나지 않고도 구성 요소를 디자인할 수 있는 유틸리티 클래스 세트를 제공합니다.

Tailwind CSS를 사용하는 이유는 무엇입니까?

유용성 우선 접근 방식: HTML에 직접 스타일을 적용할 수 있으므로 맞춤 CSS의 필요성이 줄어듭니다.
맞춤 설정: Tailwind는 고도로 맞춤 설정이 가능하므로 기본 설정을 무시하고 고유한 디자인 시스템을 만들 수 있습니다.
반응형 디자인: Tailwind는 내장형 반응형 디자인 유틸리티를 제공하므로 모바일 중심 디자인을 쉽게 만들 수 있습니다.
일관성: 애플리케이션 전체에서 일관된 스타일을 보장합니다.

전제 조건

시작하기 전에 다음이 설치되어 있는지 확인하세요.

Node.js(v12 이상)
npm(노드 패키지 관리자)

공식 홈페이지에서 Node.js와 npm을 다운로드하여 설치할 수 있습니다.

새 프로젝트 설정

먼저 프로젝트에 대한 새 디렉토리를 생성하고 해당 디렉토리로 이동합니다.

mkdir tailwind-project
cd tailwind-project

로그인 후 복사

다음으로 새 npm 프로젝트를 초기화합니다.

npm init -y

로그인 후 복사

이 명령은 프로젝트 종속성과 스크립트를 추적하는 package.json 파일을 생성합니다.

Tailwind CSS 설치

Tailwind CSS를 설치하려면 프로젝트에 종속 항목으로 추가해야 합니다. 다음 명령을 실행하세요:

npm install tailwindcss

로그인 후 복사

Tailwind CSS를 설치한 후 구성 파일을 생성해야 합니다. 이 파일을 사용하면 Tailwind CSS의 기본 설정을 맞춤설정할 수 있습니다. 이 파일을 생성하려면 다음을 실행하세요.

npx tailwindcss init

로그인 후 복사

이 명령은 프로젝트 루트에 tailwind.config.js 파일을 생성합니다. 이 파일에서 Tailwind 설정을 맞춤설정할 수 있습니다.

Tailwind CSS 구성

tailwind.config.js 파일을 엽니다. 다음과 같은 기본 구성이 표시됩니다.

module.exports = {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}

로그인 후 복사

콘텐츠 배열은 모든 템플릿 파일의 경로를 지정하는 데 사용됩니다. 이를 통해 Tailwind는 프로덕션에서 사용하지 않는 스타일을 트리쉐이크할 수 있습니다. HTML 및 JavaScript 파일에 경로를 추가하세요.

module.exports = {
  content: [
    './src/**/*.{html,js}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

로그인 후 복사

이 구성은 Tailwind가 src 디렉터리 내의 .html 또는 .js 파일에서 클래스를 찾도록 지시합니다.

첫 번째 Tailwind CSS 파일 만들기

다음으로 Tailwind의 기본, 구성요소, 유틸리티 스타일을 가져올 새 CSS 파일을 만듭니다. src 디렉토리를 생성하고 그 안에 styles.css라는 파일을 생성합니다:

mkdir src
touch src/styles.css

로그인 후 복사

styles.css 파일을 열고 다음 가져오기를 추가하세요.

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

로그인 후 복사

이 지시어는 Tailwind가 CSS 파일에 기본, 구성요소 및 유틸리티 스타일을 포함하도록 지시합니다.

CSS 구축 및 시청

CSS를 컴파일하려면 Tailwind CLI를 사용해야 합니다. package.json 파일에 빌드 스크립트를 추가합니다.

"scripts": {
  "build": "tailwindcss -i ./src/styles.css -o ./dist/styles.css",
  "watch": "tailwindcss -i ./src/styles.css -o ./dist/styles.css --watch"
}

로그인 후 복사

빌드 스크립트는 src/styles.css 파일을 컴파일하고 결과를 dist/styles.css에 출력합니다. 감시 스크립트는 동일한 작업을 수행하지만 계속해서 변경 사항을 감시하고 자동으로 다시 컴파일합니다.

처음으로 CSS를 컴파일하려면 다음을 실행하세요.

npm run build

로그인 후 복사

이 명령은 컴파일된 styles.css 파일로 dist 디렉터리를 생성합니다.

첫 번째 HTML 파일 만들기

이제 src 디렉터리에 index.html 파일을 만듭니다.

touch src/index.html

로그인 후 복사

index.html 파일을 열고 다음 상용구 HTML을 추가하세요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tailwind CSS Project</title>
  <link href="../dist/styles.css" rel="stylesheet">
</head>
<body>
  <h1 class="text-4xl font-bold text-center mt-10">Hello, Tailwind CSS!</h1>
</body>
</html>

로그인 후 복사

이 간단한 HTML 파일에는 컴파일된 Tailwind CSS 파일이 포함되어 있으며 스타일이 지정된 제목을 추가합니다.

변경 사항을 보려면 웹 브라우저에서 index.html 파일을 엽니다.

생산 최적화

프로젝트를 배포할 준비가 되면 생산에 맞게 CSS를 최적화하고 싶을 것입니다. Tailwind는 사용하지 않는 스타일을 제거하고 CSS를 축소하기 위한 내장 도구를 제공합니다.

To enable this, update your tailwind.config.js file to include the purge option:

module.exports = {
  content: [
    './src/**/*.{html,js}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

로그인 후 복사

Next, install @fullhuman/postcss-purgecss and cssnano:

npm install @fullhuman/postcss-purgecss cssnano

로그인 후 복사

Create a postcss.config.js file in your project root and add the following configuration:

const purgecss = require('@fullhuman/postcss-purgecss');
const cssnano = require('cssnano');

module.exports = {
  plugins: [
    purgecss({
      content: ['./src/**/*.{html,js}'],
      defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || [],
    }),
    cssnano({
      preset: 'default',
    }),
  ],
}

로그인 후 복사

This configuration sets up PostCSS with PurgeCSS and CSSNano to remove unused styles and minify your CSS.

Finally, update your build script in package.json:

"scripts": {
  "build": "NODE_ENV=production tailwindcss -i ./src/styles.css -o ./dist/styles.css"
}

로그인 후 복사

Run the build script to generate your optimized CSS:

npm run build

로그인 후 복사

Your dist/styles.css file is now optimized for production.

Conclusion

Setting up a Tailwind CSS project from scratch is straightforward and provides a powerful toolkit for building custom designs. By following this guide, you've learned how to install Tailwind CSS, configure it, and optimize it for production. Tailwind's utility-first approach streamlines the styling process, allowing you to focus on building your application.

Happy coding!

위 내용은 Tailwind CSS 프로젝트를 처음부터 설정하기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!