Trong bài viết này, chúng ta hãy cùng tìm hiểu cách để sử dụng Tailwind CSS cho dự án NextJS, một sự kết hợp tuyệt vời.

1. NextJS là gì ?

NextJS là một React Framework hỗ trợ SSG (Static Site Generation), SSR (Server Side Rendering),... Hỗ trợ SEO và trải nghiệm người dùng tốt hơn, cộng đồng lớn.

1. Tailwind CSS là gì ?

Tailwind CSS là một utility-first CSS framework, nó có sẵn những class built-in để chúng ta sử dụng mà không cần phải đau đầu nghĩ tên class.

3. Cùng mình cài đặt Tailwind CSS cho dự án NextJS nào

Đầu tiên là khởi tạo dự án NextJs:

npx create-next-app your-project
cd your-project

Tiếp đến là cài đặt Taildwind CSS, tại thư mục gốc, bạn chạy lệnh:

yarn add -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

file tailwind.config.js:

module.exports = {
  mode: "jit",
  purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

file globals.css:

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

Cài đặt extensions Tailwind CSS IntelliSense để gợi ý class của Tailwind CSS.

Vậy là phần cài đặt đã xong, sử dụng thành quả của chúng ta nào.

export default function Home() {
  return (
    <div className="flex flex-col items-center">
      <h1 className="text-red-500 font-medium text-4xl">Huki Dev</h1>
      <p className="text-blue-600 text-3xl">Chào tất cả các bạn ♥</p>
    </div>
  );
}

Đây là kết quả:

Tạm kết

Trên đây là cách cài đặt Tailwind CSS cho dự án NextJS. Hy vọng bài viết sẽ giúp ích cho bạn. Cảm ơn bạn đã dành thời gian cùng mình tìm hiểu.