Tailwind CSS: Giải pháp thay thế Bootstrap và Hướng dẫn cài đặt Next.js

Bootstrap và Foundation từ lâu đã là những framework CSS hàng đầu, đặt nền móng cho vô số dự án web. Tuy nhiên, trong thời gian gần đây, Tailwind CSS nổi lên như một lựa chọn hấp dẫn, cung cấp phương pháp xây dựng giao diện website một cách nhanh chóng và hiệu quả thông qua các class định sẵn. Vậy, điều gì khiến Tailwind CSS trở nên đặc biệt và liệu nó có thể thay thế Bootstrap? Hãy cùng khám phá những ưu điểm và cách cài đặt Tailwind CSS trong Next.js.

Ảnh minh họa Tailwind CSSẢnh minh họa Tailwind CSS

Tailwind CSS là gì?

Tailwind CSS là một framework CSS theo kiểu “utility-first”. Tương tự như Bootstrap, nó cung cấp các class được xây dựng sẵn để áp dụng các thuộc tính CSS. Điểm khác biệt của Tailwind CSS nằm ở chỗ nó cung cấp một bộ sưu tập lớn các class chi tiết, cho phép bạn kiểm soát giao diện một cách chính xác. Bạn có thể dễ dàng tùy chỉnh và mở rộng các class này để tạo ra những thiết kế độc đáo.

Điểm tiện lợi khi sử dụng Tailwind CSS là thư viện class rất lớn, kèm theo quy tắc đặt tên dễ hiểu, giúp người dùng dễ dàng nắm bắt chức năng của từng class, từ đó đẩy nhanh tốc độ phát triển giao diện người dùng. Khả năng tùy biến cao mang đến sự linh hoạt tuyệt vời cho các dự án web.

Cài đặt Tailwind CSS trong Next.js

Phần này sẽ hướng dẫn bạn cách cài đặt Tailwind CSS trong một dự án Next.js. Các bước thực hiện tương tự cho Nuxt.js.

Bước 1: Tạo dự án Next.js

Nếu bạn chưa có dự án Next.js, hãy tạo một dự án mới bằng các lệnh sau:

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

Bước 2: Cài đặt Tailwind CSS và các gói liên quan

Cài đặt Tailwind CSS, Autoprefixer và PostCSS Loader bằng lệnh sau:

npm install tailwindcss autoprefixer postcss-loader -save-dev

Ngoài ra, bạn cần cài đặt thêm plugin next-css:

npm install @zeit/next-css

Bước 3: Cấu hình PostCSS

Tạo file postcss.config.js trong thư mục gốc của dự án với nội dung sau:

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

Bước 4: Cấu hình next.config.js

Tạo hoặc chỉnh sửa file next.config.js để sử dụng các plugin đã cài đặt:

const path = require('path');
const fs = require('fs');
const withPlugins = require('next-compose-plugins');
const css = require('@zeit/next-css');
const less = require('@zeit/next-less');
const lessToJS = require('less-vars-to-js');
const progressBar = require('next-progressbar');

const nextConfig = {
  // Các cấu hình khác của Next.js
};

module.exports = withPlugins(
  [
    progressBar,
    css,
    [less, {
      lessLoaderOptions: {
        javascriptEnabled: true,
      },
    }],
  ],
  nextConfig
);

Thêm đoạn script sau vào file package.json:

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

Bước 5: Tạo file CSS Tailwind

Trong thư mục assets của dự án, tạo thư mục styles/less và tạo file tailwind.less với nội dung sau:

@tailwind base;
@tailwind components;
@tailwind utilities;

Sau đó, tạo file app.less trong cùng thư mục với nội dung:

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

Bước 6: Sử dụng Tailwind CSS trong Component

Tạo một file component, ví dụ pages/demo.js, và import file app.less:

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

const Demo = () => (


      Viblo


);

export default Demo;

Bước 7: Chạy dự án

Chạy lệnh npm run dev và truy cập vào đường dẫn tương ứng để xem kết quả.

Sử dụng class Tailwind CSS

Để tạo một thanh menu, bạn có thể sử dụng các class sau:

  • flex container: Tạo một container sử dụng flexbox.
  • py-4: Thêm padding trên và dưới (padding-top và padding-bottom) với kích thước 1rem (16px). Các giá trị padding khác như py-1 (0.25rem) đến py-64 cũng có sẵn.
  • bg-orange-900: Đặt màu nền cam đậm.

Để căn chỉnh logo, sử dụng class ml-10 để tạo khoảng cách bên trái (margin-left) là 2.5rem. Class cursor-pointer sẽ thay đổi con trỏ chuột thành hình bàn tay khi di chuột qua logo.

Để tăng kích thước font chữ, sử dụng class text-3xl. Class text-blue-200 đặt màu chữ xanh nhạt và font-semibold đặt độ đậm của chữ.

Class visible hiển thị icon 3 gạch khi độ rộng màn hình dưới 768px. Khi màn hình lớn hơn, class md:invisible sẽ ẩn icon này. Tailwind CSS sử dụng tiền tố sm:, md:, lg:, xl: để áp dụng các style responsive.

Các liên kết điều hướng có thể sử dụng các class chung, với class cursor-default được thêm vào liên kết “Home”. Class hidden ẩn danh sách liên kết khi màn hình nhỏ hơn 768px, và md:flex overflow-x-hidden hiển thị danh sách nằm ngang khi màn hình lớn hơn.

Sử dụng lại class với @apply

Một trong những tính năng mạnh mẽ của Tailwind CSS là khả năng sử dụng lại các class built-in để tạo ra các class mới bằng cú pháp @apply. Ví dụ, bạn có thể thêm đoạn code sau vào file assets/styles/less/app.less:

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

.demo {
  @apply flex justify-between items-center py-4 bg-blue-900;
}

Sau đó, bạn có thể sử dụng class .demo trong component của mình:

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

const Demo = () => (


      Viblo


);

export default Demo;

Kết quả sẽ tương tự như khi bạn sử dụng trực tiếp các class Tailwind CSS.

Tạo responsive, hover, focus class với @variants

Tailwind CSS cho phép bạn tạo ra các class responsive, hover, focus, active một cách dễ dàng bằng cách sử dụng @variants. Ví dụ:

/* Input */
@variants hover, focus {
  .banana {
    color: yellow;
  }
}

/* Output */
.banana {
  color: yellow;
}

.hover:banana:hover {
  color: yellow;
}

.focus:banana:focus {
  color: yellow;
}

Tương tự, bạn có thể tạo ra các class responsive:

.bg-gradient-brand {
  background-image: linear-gradient(blue, green);
}

/* ... */
@media (min-width: 640px) {
  .sm:bg-gradient-brand {
    background-image: linear-gradient(blue, green);
  }
  /* ... */
}

@media (min-width: 768px) {
  .md:bg-gradient-brand {
    background-image: linear-gradient(blue, green);
  }
  /* ... */
}

@media (min-width: 1024px) {
  .lg:bg-gradient-brand {
    background-image: linear-gradient(blue, green);
  }
  /* ... */
}

@media (min-width: 1280px) {
  .xl:bg-gradient-brand {
    background-image: linear-gradient(blue, green);
  }
  /* ... */
}

Truy cập giá trị cấu hình với theme()

Bạn có thể truy cập và sử dụng các giá trị trong file cấu hình Tailwind CSS bằng hàm theme(). Ví dụ, nếu bạn có file tailwind.config.js như sau:

module.exports = {
  important: true,
  theme: {
    screens: {
      vs: '320px',
      sm: '576px',
      md: '768px',
      lg: '992px',
      xl: '1200px',
      xxl: '1600px',
    },
    extend: {},
    fontSize: {
      xs: '.75rem',
      sm: '.875rem',
      tiny: '.875rem',
      base: '1rem',
      lg: '1.125rem',
      xl: '1.25rem',
      '2xl': '1.5rem',
      '3xl': '1.875rem',
      '4xl': '2.25rem',
      '5xl': '3rem',
      '6xl': '4rem',
      '7xl': '5rem',
      '8xl': '6rem',
      '9xl': '7rem',
      '10xl': '8rem',
      '11xl': '9rem',
    },
  },
  variants: {},
  plugins: [],
};

Bạn có thể sử dụng giá trị fontSize.11xl trong CSS như sau:

.btn-blue {
  font-size: theme('fontSize.11xl');
}

Tùy chỉnh theme

Bạn có thể tùy chỉnh theme của Tailwind CSS bằng cách chỉnh sửa file tailwind.config.js. Ví dụ, bạn có thể thêm các kích thước màn hình và font chữ tùy chỉnh:

module.exports = {
  important: true,
  theme: {
    screens: {
      vs: '320px',
      sm: '576px',
      md: '768px',
      lg: '992px',
      xl: '1200px',
      xxl: '1600px',
    },
    extend: {},
    fontSize: {
      xs: '.75rem',
      sm: '.875rem',
      tiny: '.875rem',
      base: '1rem',
      lg: '1.125rem',
      xl: '1.25rem',
      '2xl': '1.5rem',
      '3xl': '1.875rem',
      '4xl': '2.25rem',
      '5xl': '3rem',
      '6xl': '4rem',
      '7xl': '5rem',
      '8xl': '6rem',
      '9xl': '7rem',
      '10xl': '8rem',
      '11xl': '9rem',
    },
    fontFamily: {
      display: ['Gilroy', 'sans-serif'],
      body: ['Graphik', 'sans-serif'],
    },
  },
  variants: {},
  plugins: [],
};

Tìm hiểu về Tailwind CSSTìm hiểu về Tailwind CSS

Class trạng thái

Tailwind CSS cho phép bạn dễ dàng thêm các style cho các trạng thái như hover, focus, active, disabled, visited, first-child, last-child, odd-child, even-child, focus-within.

Ví dụ:

<input type="text" class="bg-gray-100 rounded px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Nhập email">
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Sign up</button>

Đoạn code trên tạo ra một ô input và một nút Sign up. Thay vì phải viết CSS dài dòng, bạn chỉ cần thêm tiền tố hover:, focus: vào trước class để thay đổi style khi hover hoặc focus vào thẻ HTML.

Kết luận

Tailwind CSS là một framework CSS mạnh mẽ và linh hoạt, cung cấp nhiều tính năng hữu ích để xây dựng giao diện website một cách nhanh chóng và hiệu quả. Hy vọng bài viết này đã giúp bạn hiểu rõ hơn về Tailwind CSS và cách sử dụng nó trong dự án Next.js của mình.