Rylan  Becker

Rylan Becker

1648069200

Tailwind CSS: How to Add Table Elements Based on Bootstrap's Tables.

Tailwind CSS Tables Plugin

This plugin generates bootstrap styled tables in Tailwind CSS. Anything in the bootstrap tables documentation should work.

Installation

# With NPM
npm install tailwindcss-tables --save

# With Yarn
yarn add tailwindcss-tables

# Manually
# Create a /plugins/tailwindcss-tables folder in your project and drop 'index.js' inside of it.

Usage

To use the plugin, simply require it in your Tailwind config file.

plugins: [
  // Other plugins...
  require('tailwindcss-tables')(),

  // If pulled in manually...
  require('./plugins/tailwindcss-tables')(),
],

You can now use any of bootstrap's table classes in your project.

Examples

Basic example from bootstrap docs:

<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

bootstrap-table

Using Tailwind's utilities

You are free to use Tailwind's utilities to customize the table. Works with Tailwind v1.0 or pre Tailwind v1.0. Just adjust your class names.

<table class="table">
  <thead class="bg-blue-500 text-white">
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td class="bg-red-500 text-white">Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

bootstrap-table-custom

Customization

I've exposed a few options that are a bit cumbersome to change using utilities.

plugins: [
  // Other plugins...
  require('tailwindcss-tables')({
    cellPadding: '.75rem',  // default: .75rem
    tableBorderColor: '#dee2e6',  // default: #dee2e6
    tableStripedBackgroundColor: 'rgba(0,0,0,.05)',  // default: rgba(0,0,0,.05)
    tableHoverBackgroundColor: 'rgba(0,0,0,.075)',  // default: rgba(0,0,0,.075)
    tableBodyBorder: true, // default: true. If set to false, borders for the table body will be removed. Only works for normal tables (i.e. does not apply to .table-bordered)
    verticalAlign: 'top', // default: 'top'
  }),
],

Again, have a look at bootstrap's tables documentation for other options. For example, wrap your table in a div.table-responsive class and your table should be responsive.

Enjoy!


Author: drehimself
Source Code: https://github.com/drehimself/tailwindcss-tables
License: MIT License

#tailwindcss 

What is GEEK

Buddha Community

Tailwind CSS: How to Add Table Elements Based on Bootstrap's Tables.
Markus  Bartell

Markus Bartell

1611647460

Why We Don't Need Bootstrap, Tailwind or Materialize

– Why We Don’t Need Bootstrap, Tailwind or Materialize –
In this video I’m explaining why we don’t need these bloated CSS libraries in 2020.

#css #bootstrap #tailwind #tailwind

Ly  Jangi

Ly Jangi

1603264285

Tailwind CSS vs Bootstrap: What’re the Differences?

Tailwind CSS has recently benefited from an upwards trend of popularity and there is an increasing amount of front-end developers who choose to stick with the new CSS Framework as a new alternative. In this article, I want to explore the differences between Tailwind and Bootstrap and give you as much insight as possible on this topic.

Bootstrap

The initial release of  Bootstrap happened on August 19, 2011, nearly 9 years ago. Fun fact is that it was created during a hackathon by the Twitter development team and later it was developed and maintained by Mark Otto, Jacob Thornton, and a small group of core developers.

Shortly it became one of the most popular CSS Frameworks out there and it currently is the sixth-most-starred project on  GitHub and it is currently being used by millions of developers worldwide.

#css #design #bootstrap #tailwind css

Should You use Bootstrap & Tailwind CSS or Stick to Vanilla CSS?

This video is for people who use bootstrap and tailwind CSS. Many of these people are confused as to whether they should even use bootstrap and tailwind CSS. In this video, I will discuss this topic with you in great detail!

#bootstrap #tailwind #css #tailwindcss

Hong  Nhung

Hong Nhung

1587223620

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

Hire CSS Developer

Want to develop a website or re-design using CSS Development?

We build a website and we implemented CSS successfully if you are planning to Hire CSS Developer from HourlyDeveloper.io, We can fill your Page with creative colors and attractive Designs. We provide services in Web Designing, Website Redesigning and etc.

For more details…!!
Consult with our experts:- https://bit.ly/3hUdppS

#hire css developer #css development company #css development services #css development #css developer #css