การใช้งาน Tailwindcss กับ Angular 11

Tailwindcss เป็น css framework ที่เป็นที่นิยมมาก เนื่องจากความง่ายในการใช้งาน และง่ายต่อการ Transfer ให้กับคนในทีมครับ แน่นอนว่าสำหรับนักพัฒนาเว็บไซต์ด้วย Angular ถ้าอยากเอา tailwindcss มาใช้ ในบทความนี้ ก็แนะนำการติดตั้ง tailwindcss ให้ใช้งานกับ angular ได้ครับ

ก่อนอื่นก็ต้องมี angular และ nodejs ในเครื่องก่อนนะครับ  ซึ่งที่ใครยังไม่รู้วิธีติดตั้ง ผมได้เขียนบทความเกี่ยวกับการติดตั้ง angular สามารถจิ้มไปอ่านได้เลยครับ

การติดตั้ง Angular และ เริ่มต้นใช้งานการ Angular ครั้งแรก ผ่าน Angular CLI

สร้างโปรเจคใหม่

ng new angular-tailwindcss --style=scss
cd angular-tailwindcss

จากนั้นก็ติดตั้ง dependency ของ tailwindcss ครับ

npm i -D tailwindcss autoprefixer postcss postcss-import postcss-loader postcss-scss
ng add ngx-build-plus

ทำการ Custom webpack สำหรับ Angular

การจะใช้ tailwindcss เราต้องทำการ modify webpack ของ angular  เพื่อให้รองรับการทำงานของ tailwindcss ซะก่อน ซึ่งวิธีที่นิยมใช้กัน คือการใช้ @angular-builders/custom-webpack ในการ modify configuration ดังนั้น ก่อนอื่นเลย ให้เราติดตั้ง custom webpack ครับ

npm install @angular-builders/custom-webpack -D

จากนั้นให้สร้างไฟล์ webpack.config.js ที่ root folder ของโปรเจค และแปะโค๊ดด้านล่างนี้ลงไปครับ

// 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'),
          ]
        }
      }
    ]
  }
};

เราก็จะได้ custom webpack ที่มี plugin ของ tailwindcss แล้ว

แก้ไข Angular Configuration

ขั้นตอนต่อไปนี้ เราจะบอกให้ angular ไปใช้ webpack config ที่เราได้สร้างไว้ข้างต้น โดยการไปแก้ไขไฟล์ angular.json โดยการ replace @angular-devkit/build-angular ที่มีอยู่เดิมด้วย ngx-build-plus ครับ ที่เราได้ติดตั้งไว้ตั้งแต่ต้นครับ ซึ่งเราจะทำการแก้ไขไฟล์ที่บล็อก architecture ครับ

   "architect":{
      "build":{
        // ลบทิ้ง => "builder": "@angular-devkit/build-angular:browser",
         "builder":"ngx-build-plus:browser",
         "options":{
            "extraWebpackConfig":"webpack.config.js",
            .
            .
         }
      },
      "serve":{
        // ลบทิ้ง => "builder": "@angular-devkit/build-angular:dev-server",
         "builder":"ngx-build-plus:dev-server",
         "options":{
            "extraWebpackConfig":"webpack.config.js",
            .
            .
         },
      },
      "test":{
        // ลบทิ้ง => "builder": "@angular-devkit/build-angular:karma",
         "builder":"ngx-build-plus:karma",
         "options":{
            "extraWebpackConfig":"webpack.config.js",
            .
            .
         }
      }
   }

เอาละครับ ส่วนยากผ่านไปแล้ว ต่อไปก็แค่ให้เรา copy โค๊ดด้านล่างนี้ ไปแปะไว้ที่ไฟล์ src/styles.scss ครับ

@import 'tailwindcss/base';

@import 'tailwindcss/components';

@import 'tailwindcss/utilities';

เท่านี้ ขั้นตอนการติดตั้ง tailwindcss กับ angular ก็เป็นอันว่าเรียบร้อยครับ 

ทดสอบ tailwindcss

ให้ลองแก้โค๊ดที่ไฟล์ app.component.html ตามตัวอย่างโค๊ดด้านล่างนี้ครับ

<div class="w-screen h-screen flex justify-center items-center">
  <div class="w-1/3 h-80 p-4 rounded-md border">
    <div class="text-xl font-bold text-gray-600">Hello Tailwind</div>
    <p class="text-gray-600 mt-4">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint laborum quas
      vel incidunt deleniti beatae, cupiditate, magnam tenetur perspiciatis
      ratione qui impedit, dicta nostrum tempore maxime natus modi quidem. Odio.
    </p>
  </div>
</div>

จากนั้น run คำสั่ง ng serve เพื่อลองดูผลการทำงาน ซึ่งถ้าไม่มีอะไรผิดพลาด ควรจะเห็นหน้าเว็บแบบนี้ครับ

นี่ก็เป็นวิธีการ install tailwindcss กับ angular ครับ และว่าจะเป็นประโยชน์กับคนที่เข้ามาอ่านนะครับ ขอให้สนุกกับการเขียนโค๊ดครับ