Morioh
Login
Hong Nhung

Hong Nhung

4 years ago

Tailwind CSS: Liệu có thay thế được Bootstrap?

Với nền tảng web hiện đại bây giờ có một yếu tố rất rất quan trọng ảnh huởng trực tiếp đến sự thành công của trang web đấy chính là giao diện. Trong quá trình phát triển chúng ta đã quá quen với những bộ phát triển giao diện như là Bootstrap, Foundation, Bulma. Đây hầu như là những bộ giao diện gần như là hoàn chỉnh nhất rồi. Vậy Tailwind sinh ra để làm gì???

Tailwind CSS là gì?

Tailwind CSS is a utility-first CSS framework

Theo như định nghĩa trên trang chủ Tailwind thì nó là một utility-first CSS framework. Nghe có vẻ khó hiểu nhỉ 😄 😄 😄 Trong quá trình sử dụng thì mình đúc rút ngắn gọn lại như sau:

Tailwind CSS là một Framework mà các thuộc tính css đã được viết sẵn và gán thành 1 class riêng, khi dùng chỉ cần gọi class mà không cần viết css riêng nữa

Example:

<div class="md:flex">
  <div class="md:flex-shrink-0">
    <img class="rounded-lg md:w-56" src="https://sun-asterisk.com">
  </div>
  <div class="mt-4 md:mt-0 md:ml-6">
    <div class="uppercase tracking-wide text-sm text-indigo-600 font-bold">Marketing</div>
    <a href="#" class="block mt-1 text-lg leading-tight font-semibold text-gray-900 hover:underline">Finding customers for your new business</a>
    <p class="mt-2 text-gray-600">Getting a new business off the ground is a lot of hard work. Here are five ideas you can use to find your first customers.</p>
  </div>
</div>

Theo như ví dụ trên thì chúng ta ko hề phải viết một dòng css nào mà vẫn có được giao diện mong muốn.

Cài đặt

cài qua yarn hoặc npm đều được yarn add tailwind --dev

Html started

<!DOCTYPE html>
<html>
    <head>
        <title>Tailwind CSS</title>
        <link rel="stylesheet" href="tailwind.css" />
    </head>
    <body>
        <!-- Magic starts here -->

        <!-- ./End of Magic -->
    </body>
</html>

File css ở trên mình đặt là tallwind luôn

Init Tailwind

Bước này init tailwind thì output ra đặt tên là tailwind như trên luôn

./node_modules/.bin/tailwind init [filename]

Nó sẽ gen ra 1 file như này:

Ok, mở file output đó ra và bạn sẽ thấy một object, trong đó chính là các config cho css của bạn, từ button cho tới typo, rất là nhiều. Có thể tuỳ chỉnh luôn ở đây. Tiếp, bạn tạo một file input.css, trong này thêm 2 dòng này vào:

@tailwind preflight;

@tailwind utilities;

Đây là cái gì, đây là directive được cung cấp bởi tailwind: @tailwind, kiểu vậy, nó sẽ import các base styles và ulility từ cái file js cofing hồi nãy generate ra ấy.

Giờ chạy command này: ./node_modules/.bin/tailwind build input.css -o tailwind.css

Tailwind sẽ lấy các directive bên trong file input.css như là đầu vào, sử dụng file config tailwind.js để làm công thức, và cuối cùng produces ra file tailwind.css. Trông nó như này:

demo

Trong file index.html lúc đầu, ta add thử đoạn code sau:

<div class="max-w-sm rounded overflow-hidden shadow-lg">
  <img class="w-full" src="https://tailwindcss.com/img/card-top.jpg" alt="Sunset in the mountains">
  <div class="px-6 py-4">
    <div class="font-bold text-xl mb-2">The Coldest Sunset</div>
    <p class="text-grey-darker text-base">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil.
    </p>
  </div>
  <div class="px-6 py-4">
    <span class="inline-block bg-grey-lighter rounded-full px-3 py-1 text-sm font-semibold text-grey-darker mr-2">#photography</span>
    <span class="inline-block bg-grey-lighter rounded-full px-3 py-1 text-sm font-semibold text-grey-darker mr-2">#travel</span>
    <span class="inline-block bg-grey-lighter rounded-full px-3 py-1 text-sm font-semibold text-grey-darker">#winter</span>
  </div>
</div>

Kết quả:

Thử tiếp

<div class="max-w-md w-full lg:flex">
  <div class="h-48 lg:h-auto lg:w-48 flex-none bg-cover rounded-t lg:rounded-t-none lg:rounded-l text-center overflow-hidden" style="background-image: url('https://tailwindcss.com/img/card-left.jpg')" title="Woman holding a mug">
  </div>
  <div class="border-r border-b border-l border-grey-light lg:border-l-0 lg:border-t lg:border-grey-light bg-white rounded-b lg:rounded-b-none lg:rounded-r p-4 flex flex-col justify-between leading-normal">
    <div class="mb-8">
      <p class="text-sm text-grey-dark flex items-center">
        <svg class="fill-current text-grey w-3 h-3 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
          <path d="M4 8V6a6 6 0 1 1 12 0v2h1a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2v-8c0-1.1.9-2 2-2h1zm5 6.73V17h2v-2.27a2 2 0 1 0-2 0zM7 6v2h6V6a3 3 0 0 0-6 0z" />
        </svg>
        Members only
      </p>
      <div class="text-black font-bold text-xl mb-2">Can coffee make you a better developer?</div>
      <p class="text-grey-darker text-base">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil.</p>
    </div>
    <div class="flex items-center">
      <img class="w-10 h-10 rounded-full mr-4" src="https://pbs.twimg.com/profile_images/885868801232961537/b1F6H4KC_400x400.jpg" alt="Avatar of Jonathan Reinink">
      <div class="text-sm">
        <p class="text-black leading-none">Jonathan Reinink</p>
        <p class="text-grey-dark">Aug 18</p>
      </div>
    </div>
  </div>
</div>

kết quả:

Tiếp:

<div class="border m-6 rounded-lg bg-white mx-auto shadow-lg max-w-xs overflow-hidden">
        <img class="h-24 min-w-full block" src="https://png.pngtree.com/thumb_back/fh260/back_pic/00/02/62/305619b17d2530d.jpg" />
        <div class="px-4 py-3 relative min-h-3"> 
            <div class="sm:flex sm:items-center">
                <img class="w-16 border-4 border-white border-white mr-3 rounded-full" src="https://avatars3.githubusercontent.com/u/13323281?s=460&v=4" />
                <div class="w-full">
                    <button class="float-right text-xs font-semibold rounded-full px-4 py-1 leading-normal bg-white border border-blue text-blue hover:bg-blue hover:text-white">Follow</button>
                </div>
            </div>
            <div class="mt-2 text-center sm:text-left sm:flex-grow">
                <div class="mb-4">
                    <p class="text-xl font-bold leading-tight">Ezeugwu Paschal</p>
                    <p class="text-sm leading-tight text-grey-dark">@paschaldev</p>
                </div>
                <div>
                    <p class="leading-tight text-grey-darkest text-sm">
                        This is a cool profile card showcasing the awesomeness of <a class="text-blue no-underline" href="https://tailwindcss.com">Tailwindcss</a> built by awesome people who want to make the web a better place.
                    </p>
                </div>
                <p class="mt-6 text-xs text-grey-dark">
                    Followed by <a class="text-blue no-underline" href="#">Google</a> and <a class="text-blue no-underline" href="5 others">5 others</a>
                </p>
            </div>
        </div>
    </div>

kết quả:

Tiếp:

<div class="font-sans leading-tight min-h-screen bg-grey-lighter p-8">
  <div class="max-w-sm mx-auto bg-white rounded-lg overflow-hidden shadow-lg">
    <div class="bg-cover h-40" style="background-image: url('https://images.unsplash.com/photo-1522093537031-3ee69e6b1746?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=a634781c01d2dd529412c2d1e2224ec0&auto=format&fit=crop&w=2098&q=80');"></div>
    <div class="border-b px-4 pb-6">
        <div class="text-center sm:text-left sm:flex mb-4">
            <img class="h-32 w-32 rounded-full border-4 border-white -mt-16 mr-4" src="https://randomuser.me/api/portraits/women/21.jpg" alt="">
            <div class="py-2">
                <h3 class="font-bold text-2xl mb-1">Cait Genevieve</h3>
                <div class="inline-flex text-grey-dark sm:flex items-center">
                    <svg class="h-5 w-5 text-grey mr-1" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path class="heroicon-ui" d="M5.64 16.36a9 9 0 1 1 12.72 0l-5.65 5.66a1 1 0 0 1-1.42 0l-5.65-5.66zm11.31-1.41a7 7 0 1 0-9.9 0L12 19.9l4.95-4.95zM12 14a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm0-2a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"/></svg>
                    New York, NY
                </div>
            </div>
        </div>
        <div class="flex">
            <button class="flex-1 rounded-full bg-blue text-white antialiased font-bold hover:bg-blue-dark px-4 py-2 mr-2">Follow</button>
            <button class="flex-1 rounded-full border-2 border-grey font-semibold text-black px-4 py-2">Message</button>
        </div>
    </div>
    <div class="px-4 py-4">
        <div class="flex items-center text-grey-darker mb-4">
            <svg class="h-6 w-6 text-grey mr-1" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path class="heroicon-ui" d="M12 12a5 5 0 1 1 0-10 5 5 0 0 1 0 10zm0-2a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm9 11a1 1 0 0 1-2 0v-2a3 3 0 0 0-3-3H8a3 3 0 0 0-3 3v2a1 1 0 0 1-2 0v-2a5 5 0 0 1 5-5h8a5 5 0 0 1 5 5v2z"/></svg>
            <span><strong class="text-black">12</strong> Followers you know</span>
        </div>
        <div class="flex">
            <div class="flex flex-row-reverse justify-end mr-2">
              <img class="border-2 border-white rounded-full h-10 w-10" src="https://randomuser.me/api/portraits/men/32.jpg" alt="">
              <img class="border-2 border-white rounded-full h-10 w-10 -mr-2" src="https://randomuser.me/api/portraits/women/31.jpg" alt="">
              <img class="border-2 border-white rounded-full h-10 w-10 -mr-2" src="https://randomuser.me/api/portraits/men/33.jpg" alt="">
              <img class="border-2 border-white rounded-full h-10 w-10 -mr-2" src="https://randomuser.me/api/portraits/women/32.jpg" alt="">
              <img class="border-2 border-white rounded-full h-10 w-10 -mr-2" src="https://randomuser.me/api/portraits/men/44.jpg" alt="">
              <img class="border-2 border-white rounded-full h-10 w-10 -mr-2" src="https://randomuser.me/api/portraits/women/42.jpg" alt="">
            </div>
              <span class="flex items-center justify-center text-sm text-grey-darker font-semibold border-2 border-grey-light rounded-full h-10 w-10">+3</span>
        </div>
    </div>
  </div>
</div>

kết quả:

Ưu điểm của Tailwind CSS

Ưu điểm nhìn thấy rõ nhất của Tailwind CSS đấy là

  • Người sử dụng có thể chẳng phải viết đến 1 dòng css nào mà vẫn có giao diện tùy biến theo mong muốn.
  • Style, màu sắc, font chữ hiện đại, phù hợp với phong cách web hiện đại
  • Cách đặt tên class dễ hiểu, 1 class đại diện cho 1 thuộc tính. Tailwind CSS có gần như đủ gần 85% thuộc tính css.
  • Sử dụng Flex nên rất dễ chia Layout
  • Dễ cài đặt, dễ sử dụng, document của Tailwind rất dễ hiểu. Tailwind CSS phù hợp cho các dự án nhỏ, người dùng tuỳ biến nhiều, cần làm nhanh giao diện. Trong khi nếu bạn Bootstrap mà không tuỳ biến gì thì trong web của bạn sẽ đúng đậm chất Bootstrap. còn với Tailwind thì khi mỗi người dùng sẽ ra mỗi giao diện khác nhau mà không hề đụng hàng.

Nhược điểm của Tailwind CSS

  • Khi sử dụng tailwind thì bạn bạn đang phải sử dụng số class cực kì nhiều, số class sẽ tương ứng với với số thuộc tính mà bạn muốn cài đặt
  • Khi dùng font-size hoặc màu sắc vẫn đang còn phải custom lại bằng css riêng.
  • Chưa có những bộ mixin khi muốn set nhiều thuộc tính cần thiết.

Kết luận

Sau khi đọc bài viết này mong rằng mn sẽ ko so sánh Tailwind CSS và Bootstrap nữa. Tailwind CSS không có những components xây dựng sẵn như Bootstrap. Tailwind CSS vẫn chỉ là CSS Framework thôi, chỉ dành những bạn nào muốn xây dựng nhanh giao diện thôi.

#tailwind-css #css #web-development #bootstrap

Tailwind CSS: Liệu có thay thế được Bootstrap?
20.65 GEEK