Hướng dẫn bootstrap to tailwind - bootstrap to tailwind

Question

Nội dung chính Show

Tailwind CSS là gì?
Tailwind CSS is a utility-first CSS framework
Ưu điểm của Tailwind CSS
Nhược điểm của Tailwind CSS
Kết luận
Tailwind CSS là gì ?
Tại sao chúng ta nên dùng Tailwind ?
Cài đặt Tailwind trong Nextjs
Điểm mới khi dùng Tailwind CSS
Custom your design
Pseudo-Class Variants
Kết luận
Tham khảo

Đã đăng vào thg 6 20, 2019 6:23 SA 3 phút đọc 3 phút đọc

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:

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:


  
    
  
  
    Marketing
    Finding customers for your new business
    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.

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ách cài đặt thì mn có thể tham khảo tại đây: https://viblo.asia/p/tailwind-css-07LKXNYplV4

Ư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.

Xin chào mọi người, có rất nhiều bạn đang thắc mắc là có một framework CSS nào khác thay thế được Bootstrap hay không ? Theo bản thân mình thấy hiện giờ có rất nhiều các framework CSS khác nhau nhưng

npm init -y
npm install --save next react react-dom @zeit/next-css

9,

npm install tailwindcss autoprefixer postcss-loader --save-dev

0 thì vẫn là cha đẻ , là nguồn cảm hứng vô tận của các framework CSS khác. Dạo gần đây chúng ta thấy nổi trên thị trường một thứ mang tên Tailwind CSS giúp xây dựng website một cách nhanh chóng nhất với các thuộc tính CSS đã được gán thành những class riêng, khi dùng chúng ta chỉ có việc gọi ra để dùng. Vậy một câu hỏi đặt ra là tại sao chúng ta không sử dụng Bootstrap cho nó truyền thống đi ? Chắc chắn framwork CSS này nó phải có một điểm mạnh gì nó thì các lập trình Front-end mới dùng chứ nhỉ ? Chúng mình sẽ điểm qua một vài các ưu nhược điểm của nó nhé.Tailwind CSS giúp xây dựng website một cách nhanh chóng nhất với các thuộc tính CSS đã được gán thành những class riêng, khi dùng chúng ta chỉ có việc gọi ra để dùng. Vậy một câu hỏi đặt ra là tại sao chúng ta không sử dụng Bootstrap cho nó truyền thống đi ? Chắc chắn framwork CSS này nó phải có một điểm mạnh gì nó thì các lập trình Front-end mới dùng chứ nhỉ ? Chúng mình sẽ điểm qua một vài các ưu nhược điểm của nó nhé.

Tailwind CSS là gì ?

Thì nó là một utility-first CSS framework, nó cũng giống như Bootstrap, nó có những class built-in mà chúng ta có thể dùng. Tailwind CSS có nhiều các class bao gồm các thuộc tính CSS khác nhau và quan trọng, chúng ta có thể dễ dàng mở rộng tạo mới ra những class bằng chính những class của nó.

Tại sao chúng ta nên dùng Tailwind ?

Nói chung là nó cũng na ná Boostrap thôi nhưng một điều tiện lợi khi dùng framework này là chúng ta có nhiều class mới hơn tiện lợi hơn Boostrap. Các bạn có thể tham khảo tại đây trong Tailwind. Và hơn nữa, việc có nhiều thêm những class nhưng với quy tắc đặt tên cực kỳ thân thiện với người dùng, người dùng cũng có thể nhìn vào class đó và có thể biết được class này nó đang style cái gì. Chúng ta cũng phải nói đến khả năng tùy biến và mở rộng cao, đem đến cho ta sự linh hoạt không giới hạn.

Cài đặt Tailwind trong Nextjs

Sau đây mình sẽ giới thiệu cho các bạn cách cài đặt Tailwind trong Nextjs nhé. Nếu ai dùng Nuxtjs thì các bạn cũng có thể làm tương tự, ở một góc độ nào đó mình thấy về cơ bản 2 cái này nó giống nhau.

Đầu tiên các bạn phải tạo một Nextjs project

npm init -y
npm install --save next react react-dom @zeit/next-css

Tiếp theo chúng ta sẽ cài

npm install tailwindcss autoprefixer postcss-loader --save-dev

1 và một vài các package khác được sử dụng để complie CSS

npm install tailwindcss autoprefixer postcss-loader --save-dev

Và chúng ta cũng cần cài thêm

npm install tailwindcss autoprefixer postcss-loader --save-dev

2 plugin

npm install @zeit/next-css

Khi chúng ta init nextjs project xong rồi, thì chúng ta sẽ tạo 1 file

npm install tailwindcss autoprefixer postcss-loader --save-dev

3 để require 2 plugin

npm install tailwindcss autoprefixer postcss-loader --save-dev

4 và

npm install tailwindcss autoprefixer postcss-loader --save-dev

5 vào nhé

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
  ],
}

Tiếp theo trong file

npm install tailwindcss autoprefixer postcss-loader --save-dev

6 chúng ta sẽ config như sau

import path from 'path'
import fs from 'fs'

import withPlugins from 'next-compose-plugins'
import css from '@zeit/next-css'
import less from '@zeit/next-less'
import lessToJS from 'less-vars-to-js'

import progressBar from 'next-progressbar'
import nextConfig from './next.base.config'


export default withPlugins([
  progressBar,
  css,
  [less, lessConfig],
], nextConfig)

Trong file

npm install tailwindcss autoprefixer postcss-loader --save-dev

7 các bạn cho đoạn script này vào như sau

"scripts": {
  "dev": "next",
  "build": "next build",
  "start": "next start"
}

Trong thư mục assets ở trong project các bạn tạo

npm install tailwindcss autoprefixer postcss-loader --save-dev

8

@tailwind base;
@tailwind utilities;

@tailwind components;

Sau đó các bạn tạo thêm

npm install tailwindcss autoprefixer postcss-loader --save-dev

9 với nội dung

@import "./libs/tailwind.less";

Mình không muốn đi giới thiệu từng class trong

npm install @zeit/next-css

0, việc đó sẽ gây mất thời gian và nhàm chán. Thay vào đó mình sẽ thử tạo ra một page và style theo class rồi mình sẽ nói cụ thể cho các bạn nhé. hehe. Bây giờ chúng mình sẽ vào folder page và tạo 1 file

npm install @zeit/next-css

1 nhé

import '~/assets/styles/less/app.less';

const Demo = () => (
    <div className="flex justify-between items-center py-4 bg-blue-900">
        <div className="flex-shrink-0 ml-10 cursor-pointer">
            <i className="fas fa-drafting-compass fa-2x text-orange-500"></i>
            <span className="ml-1 text-3xl text-blue-200 font-semibold">Viblo</span>
        </div>
        <i className="fas fa-bars fa-2x visible md:invisible mr-10 md:mr-0 text-blue-200 cursor-pointer"></i>
        <ul className="hidden md:flex overflow-x-hidden mr-10 font-semibold">
            <li className="mr-6 p-1 border-b-2 border-orange-500">
                <a className="text-blue-200 cursor-default" href="#">Home</a>
            </li>
            <li className="mr-6 p-1">
                <a className="text-white hover:text-blue-300" href="#">Services</a>
            </li>
            <li className="mr-6 p-1">
                <a className="text-white hover:text-blue-300" href="#">Projects</a>
            </li>
            <li className="mr-6 p-1">
                <a className="text-white hover:text-blue-300" href="#">Team</a>
            </li>
            <li className="mr-6 p-1">
                <a className="text-white hover:text-blue-300" href="#">About</a>
            </li>
            <li className="mr-6 p-1">
                <a className="text-white hover:text-blue-300" href="#">Contacts</a>
            </li>
        </ul>
    </div>
);

export default Demo;

Sau đó chúng ta sẽ bật

npm install @zeit/next-css

2, đánh đường dẫn, kết quả chúng ta sẽ thu được như sau

Mình sẽ đi qua một vài các class như sau: Đầu tiên thì chúng ta muốn tạo được thanh menu thì chúng ta sẽ phải tạo ra 1 div có class flex container để chứa tất cả các thành phần trong thanh menu đó, đó chính là logo, các navigation như Home, Service, Project, Team, About, Contacts. Và chúng ta cũng không quên style padding và background cho thanh menu

npm install @zeit/next-css

3 thêm padding cho trên và dưới với các thông số py-1 tức là padding-top và padding-bottom mỗi bên 0.25rem, tương tự chúng ta cũng tăng dần lên từ py-1 cho đến py-64, các bạn tham khảo ở đây nhé. Cùng với nữa đó chính là class

npm install @zeit/next-css

4 tức là thuộc tính css

npm install @zeit/next-css

5 màu cam và 900 chính là mức độ đậm của màu cam.

Chúng ta sẽ đầu tiên đến với logo, chúng ta dùng class

npm install @zeit/next-css

6 để lo có thể cách margin bên trái 1 khoảng là 2.5 rem. và khi di chuột qua biểu tượng logo này thì chuột sẽ thay đổi thành hình bàn tay khi chúng ta có thuộc tính

npm install @zeit/next-css

7.

Chữ Viblo chúng ta muốn tăng font-size lên thì dùng class

npm install @zeit/next-css

8, màu chữ xan blue tương đối nhẹ

npm install @zeit/next-css

9 và 1 chút font-weight: 600

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
  ],
}

0

Icon 3 gạch được style với class visible khi width màn hình dưới 768px, khi màn hình lớn hơn thì icon 3 gạch này sẽ bị ẩn đi với class

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
  ],
}

1 . Các bạn lưu ý, trong tailwind css thì khi chúng ta muốn responsive cho các màn thì chúng ta chỉ cần thêm các tiền tố

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
  ],
}

2 vào trước các class . Các bạn tham khảo thêm responsive ở đây.

Tiếp đến đó chính là thành phần liên kết điều hướng Home, Service, Project, Team, About, Contacts, Chúng ta thấy hầu hết các liên kết điều hướng này có cùng class style như nhau nhưng thành phần Home sẽ làm khác đi một chút bằng các thêm style

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
  ],
}

3. Và đáng nhẽ ra nó sẽ thành một danh sách sổ xuống nhưng do dùng class

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
  ],
}

4 nên khi màn hình tầm 768px trở xuống danh sách đó sẽ bị ẩn đi, và khi màn hình trên 768px thì danh sách đó được hiện lên nằm ngang với class

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
  ],
}

5.

Điểm mới khi dùng Tailwind CSS

Như các bạn đã biết đấy, khi chúng ta dùng framwork này ngoài việc nhiều class hơn tiện cho việc chúng ta style thì chúng ta còn có thể sử dụng lại các class build-in trong framework này để viết một class mới. Đó chính là khi chúng ta sử dụng từ khóa @apply.@apply.

Bây giờ chúng ta lại mở file assets/styles/less/app.less ra chúng ta sẽ viết thêm css cho class như sau

npm init -y
npm install --save next react react-dom @zeit/next-css

0

Và sau đó các bạn thay đoạn code thành như sau thì các bạn cũng nhận được kết quả giống y hệt như ban đầu

npm init -y
npm install --save next react react-dom @zeit/next-css

1

Đây có thể nói là một đặc điểm riêng biệt mà mình thích nhất ở framework này, tại vì nó giúp mình sử dụng được những class built-in của framework trong một class mới, trông code chúng ta gọn gàng hơn rất là nhiều. Nếu dùng Bootstrap thì mình sẽ phải viết hết tất cả các class built-in của framework mà mình cần vào thẻ đó, như thế nhìn code front-end mình trông nó không gọn tí nào cả.

Tiếp theo đó chính là bạn có thể generate

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
  ],
}

6,

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
  ],
}

7,

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
  ],
}

8,

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
  ],
}

9,

import path from 'path'
import fs from 'fs'

import withPlugins from 'next-compose-plugins'
import css from '@zeit/next-css'
import less from '@zeit/next-less'
import lessToJS from 'less-vars-to-js'

import progressBar from 'next-progressbar'
import nextConfig from './next.base.config'


export default withPlugins([
  progressBar,
  css,
  [less, lessConfig],
], nextConfig)

0các class này bằng cách chúng ta sẽ viết trong file css , wrap chúng bằng

import path from 'path'
import fs from 'fs'

import withPlugins from 'next-compose-plugins'
import css from '@zeit/next-css'
import less from '@zeit/next-less'
import lessToJS from 'less-vars-to-js'

import progressBar from 'next-progressbar'
import nextConfig from './next.base.config'


export default withPlugins([
  progressBar,
  css,
  [less, lessConfig],
], nextConfig)

1

Ví dụ

npm init -y
npm install --save next react react-dom @zeit/next-css

2

Viết 1 mà sinh ra được nhiều thứ như này, thật ngắn gọn mà lại mang lại hiệu quả đúng ko các bạn.

Tiếp theo đến

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
  ],
}

6 nó cũng tương tự như vậy

npm init -y
npm install --save next react react-dom @zeit/next-css

3

Sử dụng phương thức

import path from 'path'
import fs from 'fs'

import withPlugins from 'next-compose-plugins'
import css from '@zeit/next-css'
import less from '@zeit/next-less'
import lessToJS from 'less-vars-to-js'

import progressBar from 'next-progressbar'
import nextConfig from './next.base.config'


export default withPlugins([
  progressBar,
  css,
  [less, lessConfig],
], nextConfig)

3 để các bạn có thể truy cập là lấy ra giá trị trong

import path from 'path'
import fs from 'fs'

import withPlugins from 'next-compose-plugins'
import css from '@zeit/next-css'
import less from '@zeit/next-less'
import lessToJS from 'less-vars-to-js'

import progressBar from 'next-progressbar'
import nextConfig from './next.base.config'


export default withPlugins([
  progressBar,
  css,
  [less, lessConfig],
], nextConfig)

4. Ví dụ bạn có file

import path from 'path'
import fs from 'fs'

import withPlugins from 'next-compose-plugins'
import css from '@zeit/next-css'
import less from '@zeit/next-less'
import lessToJS from 'less-vars-to-js'

import progressBar from 'next-progressbar'
import nextConfig from './next.base.config'


export default withPlugins([
  progressBar,
  css,
  [less, lessConfig],
], nextConfig)

5 như sau :

npm init -y
npm install --save next react react-dom @zeit/next-css

4

Bây giờ các bạn có file css như sau

npm init -y
npm install --save next react react-dom @zeit/next-css

5

Thật dễ dàng đúng ko nào các bạn.

Custom your design

Trong project nextjs, chúng ta sẽ tạo một file

import path from 'path'
import fs from 'fs'

import withPlugins from 'next-compose-plugins'
import css from '@zeit/next-css'
import less from '@zeit/next-less'
import lessToJS from 'less-vars-to-js'

import progressBar from 'next-progressbar'
import nextConfig from './next.base.config'


export default withPlugins([
  progressBar,
  css,
  [less, lessConfig],
], nextConfig)

5 với nội dung như sau:

npm init -y
npm install --save next react react-dom @zeit/next-css

6

Ví dụ ở trên mình custome lại các kích cở của màn hình, fontSize các thứ . Tương tự các bạn muốn custome font-family thì các bạn chỉ việc thêm vào file này thôi

npm init -y
npm install --save next react react-dom @zeit/next-css

7

Dễ như ăn kẹo đúng không các bạn ))

))

Pseudo-Class Variants

Đây là một điểm mình rất thích ở framework CSS này bởi vì chúng ta có thể viết class cho các sự kiện

import path from 'path'
import fs from 'fs'

import withPlugins from 'next-compose-plugins'
import css from '@zeit/next-css'
import less from '@zeit/next-less'
import lessToJS from 'less-vars-to-js'

import progressBar from 'next-progressbar'
import nextConfig from './next.base.config'


export default withPlugins([
  progressBar,
  css,
  [less, lessConfig],
], nextConfig)

7 cho các thẻ.

Ví như

npm init -y
npm install --save next react react-dom @zeit/next-css

8

Đoạn code trên là chúng ta tạo ra 1 ô input với nút Sign up, thay vì phải viết css dài dướm dà chúng ta thêm tiền tố

import path from 'path'
import fs from 'fs'

import withPlugins from 'next-compose-plugins'
import css from '@zeit/next-css'
import less from '@zeit/next-less'
import lessToJS from 'less-vars-to-js'

import progressBar from 'next-progressbar'
import nextConfig from './next.base.config'


export default withPlugins([
  progressBar,
  css,
  [less, lessConfig],
], nextConfig)

8 vào trước class thôi là chúng ta đã có thể thực hiện thay đổi style khi hover hoặc focus vào thẻ html. Các bạn tham khảo thêm các ví dụ tại đây

Kết luận

Vậy qua đó, qua một vài những tìm hiểu của mình về

import path from 'path'
import fs from 'fs'

import withPlugins from 'next-compose-plugins'
import css from '@zeit/next-css'
import less from '@zeit/next-less'
import lessToJS from 'less-vars-to-js'

import progressBar from 'next-progressbar'
import nextConfig from './next.base.config'


export default withPlugins([
  progressBar,
  css,
  [less, lessConfig],
], nextConfig)

9 ở trên cũng giúp các bạn phần nào mường tượng ra nó là cái gì, nó sử dụng như thế nào, một vài các dặc điểm đặc trung của nó ra sao. Mong rằng qua bài viết này của mình các bạn có thể dùng và áp dụng chúng vào các project các bạn đang làm. Cảm ơn các bạn đã đọc bài viết của mình.

Tham khảo

https://tailwindcss.com/

programming bootstrap Tailwindcss Tailwind CSS responsive Tailwind CSS grid Tailwind là gì Tailwind component Tailwind CSS CDN

Hướng dẫn bootstrap to tailwind - bootstrap to tailwind

Tailwind CSS là gì?

Tailwind CSS is a utility-first CSS framework

Ưu điểm của Tailwind CSS

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

Kết luận

Tailwind CSS là gì ?

Tại sao chúng ta nên dùng Tailwind ?

Cài đặt Tailwind trong Nextjs

Điểm mới khi dùng Tailwind CSS

Custom your design

Pseudo-Class Variants

Kết luận

Tham khảo

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội