Angular 10에서 TailwindCss 설정

Tailwind CSS는 무시하기 위해 싸워야 하는 성가신 독단적인 스타일 없이 디자인을 구축하는 데 필요한 모든 빌딩 블록을 제공하는 고도로 사용자 정의 가능한 유틸리티 CSS 프레임워크입니다.

이 기사에서는 Angular 10에서 tailwindCss를 설정할 것입니다. 로컬 컴퓨터에서 Angular 10을 실행하지 않는 경우 튜토리얼 - How to upgrade from Angular 9 to Angular 10을 확인할 수 있습니다. 또한 수행 중이거나 향후 수행할 프로젝트의 속도를 높이기 위해 free angular 10 templates을 찾고 있는 경우 WrapPixel에서 다운로드하십시오. MIT 라이선스에 따라 개인 및 상업용으로 무료로 사용할 수 있으며 함께 제공됩니다. 평생 무료 업데이트.

전제 조건

HTML 및 CSS에 대한 기본 이해,

Angular에 대한 기본 이해

몇 가지 코드를 작성하자
ng new 명령 다음에 프로젝트 이름을 사용하여 새 Angular 프로젝트를 만드는 것으로 시작합니다.

ng new tailwind-angular

이 명령을 실행하면 몇 가지 질문이 표시됩니다. css 스타일 지정 프레임워크에 대해 scss를 선택합니다.

Angular 프로젝트를 설정한 후 다음 명령을 사용하여 TailwindCss를 개발 종속성으로 설치해야 합니다.

npm install tailwindcss -D

TailwindCss를 설정하려면 Tailwind 빌드를 위한 다양한 패키지postcss를 설정해야 합니다. 커스텀 Angular 웹팩 빌더도 필요합니다. 이를 설정하려면 프로젝트 디렉토리 내의 터미널에서 다음을 실행하십시오.

npm install  postcss-scss postcss-import @angular-builders/custom-webpack postcss-loader -D

이 패키지를 설치하려면 제대로 작동하려면 몇 가지 추가 구성이 필요합니다.

애플리케이션의 루트에 webpack.config.js 파일을 생성하고 파일 내부에 다음 코드를 추가합니다.

module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        loader: 'postcss-loader',
        options: {
          ident: 'postcss',
          syntax: 'postcss-scss',
          plugins: () => [
            require('postcss-import'),
            require('tailwindcss'),
            require('autoprefixer'),
          ]
        }
      }
    ]
  }
};

여기서는 애플리케이션에서 Sass를 실행하고 TailwindCss를 플러그인으로 등록할 수 있도록 몇 가지 기본 웹팩 규칙을 추가합니다.

이제 모든 scss 파일이 webpack에서 인식되고 postcss-loader 패키지에서 로드됩니다.

터미널에서 다음 명령을 실행하여 사용자 정의 빌더를 사용하여 애플리케이션을 제공하고 빌드하도록 애플리케이션에 지시해야 합니다.

ng config projects.tailwind-angular.architect.build.builder @angular-builders/custom-webpack:browser

ng config projects.tailwind-angular.architect.build.options.customWebpackConfig.path webpack.config.js

ng config projects.tailwind-angular.architect.serve.builder @angular-builders/custom-webpack:dev-server

ng config projects.tailwind-angular.architect.serve.options.customWebpackConfig.path webpack.config.js

터미널을 사용하여 각도 응용 프로그램을 구성하는 방법에 대한 자세한 내용은 Angular’s official Documentation을 확인하십시오.

TailwindCss를 사용하려면 구성 파일을 만들어야 합니다. 응용 프로그램의 루트에 tailwind.config.js 파일을 수동으로 생성하거나 터미널에서 실행하여 하나를 생성할 수 있습니다.

npx tailwindcss init

이 파일은 빈 설정과 함께 제공됩니다.

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

TailwindCss는 Bootstrap 및 Materilizecss와 같은 다른 CSS 프레임워크와 마찬가지로 id 고유의 기본 스타일과 함께 제공됩니다.

Tailwindcss 스타일 및 기능 사용을 시작하려면 Tailwindcss base , component 및 utilities 스타일을 루트src/styles.scss 파일로 가져올 수 있습니다.

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

이 작업이 완료되면 이제 응용 프로그램에서 Tailwindcss를 사용할 수 있습니다. 테스트해 봅시다. src/app/app.component.html 파일의 코드를 다음과 같이 편집합니다.

<section>
  <div class="container px-4 mt-5">
    <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative" role="alert">
      <strong class="font-bold">Tailwind CSS -----</strong>
      <span class="block sm:inline">Get your cool angular templates at <a href="https://www.wrappixel.com/">WrapPixel</a> </span>
      <span class="absolute top-0 bottom-0 right-0 px-4 py-3">
        <svg class="fill-current h-6 w-6 text-red-500" role="button" xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 20 20">
          <title>Close</title>
          <path
            d="M14.348 14.849a1.2 1.2 0 0 1-1.697 0L10 11.819l-2.651 3.029a1.2 1.2 0 1 1-1.697-1.697l2.758-3.15-2.759-3.152a1.2 1.2 0 1 1 1.697-1.697L10 8.183l2.651-3.031a1.2 1.2 0 1 1 1.697 1.697l-2.758 3.152 2.758 3.15a1.2 1.2 0 0 1 0 1.698z" />
        </svg>
      </span>
    </div>
    <div class="bg-indigo-900 text-center py-4 lg:px-4 mt-4">
      <div class="p-2 bg-indigo-800 items-center text-indigo-100 leading-none lg:rounded-full flex lg:inline-flex"
        role="alert">
        <span class="flex rounded-full bg-indigo-500 uppercase px-2 py-1 text-xs font-bold mr-3">New</span>
        <span class="font-semibold mr-2 text-left flex-auto">Get the coolest t-shirts from our brand new store</span>
        <svg class="fill-current opacity-75 h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
          <path d="M12.95 10.707l.707-.707L8 4.343 6.586 5.757 10.828 10l-4.242 4.243L8 15.657l4.95-4.95z" /></svg>
      </div>
    </div>
  </div>
</section>
<router-outlet></router-outlet>

응용 프로그램을 다시 시작할 때까지 작동하지 않을 수 있으므로 각도 서버를 닫은 다음 다시 시작할 수 있습니다.



모든 Tailwindcss UI 구성 요소를 얻으려면 공식 문서(-https://tailwindcss.com/)로 이동하십시오.