Angular 애플리케이션에서 tailwindcss를 설정하는 방법에 대한 많은 자습서와 게시물이 있습니다. 일부는 작동하고 일부는 작동하지 않을 수 있습니다. 다음은 구성 및 소스 코드를 많이 수정하지 않고 설정하는 방법에 대한 내 로그입니다.

설정

전제 조건

npm

노드

애플리케이션 생성을 시작해 보겠습니다.

ng new ngtw 

lib 스타일링을 위해 SCSS를 선택합니다. 기본 응용 프로그램을 설정한 후 다음을 입력합니다.

npm install --save-dev tailwindcss
npm install --save-dev @angular-builders/custom-webpack postcss-scss postcss-import postcss-loader 

Magic은 @angular-builders의 맞춤형 웹팩에 있습니다. 기본 대신 사용하도록 프로젝트를 구성해야 합니다.

먼저 유용한 구성을 만들 수 있습니다. postcss와 web pack이 매우 살아있고 API가 변경될 수 있기 때문에 호환되지 않는 많은 구성을 발견했습니다. 이것은 작성 시점(30.09.2020)으로 아주 잘 작동합니다. 그래서

touch webpack.config.js 

그리고 입력

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

다음 단계는 Angular에 구성을 사용하는 방법을 알려주는 것입니다.

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

ng config projects.ngtw.architect.build.options.customWebpackConfig.path webpack.config.js

첫 번째는 실제 빌더를 위한 것이고 다음은

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

ng config projects.ngtw.architect.serve.options.customWebpackConfig.path webpack.config.js

개발 서버용으로 제작되었습니다. 이제 작동하는 webpack 구성 설정이 있으므로 tailwind 자체를 초기화할 시간입니다.

npx tailwind init

위의 명령은 프로젝트에 tailwind.config.js를 추가합니다. 그대로 둘 수 있습니다.

전역 styles.scss 파일에서 이제 Tailwind를 가져와야 합니다.

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

이 작업을 완료하면 tailwindcss를 사용하여 각도 템플릿을 만들 수 있습니다. app.component.html에서 hello world를 구축할 수 있습니다.

<div class="bg-gray-100 mx-auto my-auto">

  <h1 class="my-8 text-center text-6xl font-bold">

    <span class="text-teal-500">TailwindCSS</span>

     and

    <span class="text-red-600">Angular</span>

     is awesome!

  </h1>

      <p class="text-center text-3xl">

        Thanks for reading

      </p>

</div>

검토

포스트는 매우 짧은 시간 안에 사용자 정의 웹팩 동작과 tailwindcss를 통합하는 방법을 보여줍니다. Flutter와 SwiftUI를 보았을 때 저는 제 애플리케이션을 위한 유사한 UI 설명 레이어를 원했습니다. 나는 비즈니스 앱을 만들고 웹 팀에서 예쁘다.

순풍과 함께 나는 내가 있고 싶은 곳이 훨씬 더 많습니다. 저는 Angular의 프레임워크 또는 플랫폼 사고 방식을 중요하게 생각하고 모든 친숙한 옵션과 수명을 제공합니다. 게다가 UI 요소의 훌륭하고 잘 어울리는 추상화도 시간이 걸릴 것이라고 확신합니다.


읽은 내용이 마음에 들거나 토론하고 싶은 내용이 있으면 언제든지 이모티콘이나 댓글을 보내주십시오. 고맙습니다!