Nguyen’s Blog
Nguyen’s Blog/
Sử dụng Tailwind CSS trong NextJS
Search
Sử dụng Tailwind CSS trong NextJS

Sử dụng Tailwind CSS trong NextJS

Tags
Published
NextJS là framework cho phép chúng ta thực hiệnServer Side Rendering (SSR)
Tailwind CSS là một utility-first CSS framework cho phép chúng ta tạo style cho trang web mà không cần viết nhiều CSS.

1. Cài đặt

Tạo nextjs app
  npx create-next-app next-tailwindcss
  cd next-tailwindcss
Cài đặt Tailwind CSS
  yarn install -D tailwindcss@latest postcss@latest autoprefixer@lates

2. Cấu hình

Tạo config Tailwind CSS: tailwind.config.js , postcss.config.js
  npx tailwindcss init -p
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: [],
};
postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}
package.json
{
  "name": "next-tailwindcss",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "next": "10.2.2",
    "react": "17.0.2",
    "react-dom": "17.0.2"
  },
  "devDependencies": {
    "autoprefixer": "^10.2.5",
    "postcss": "^8.3.0",
    "tailwindcss": "^2.1.2"
  }
}

3. Chạy

yarn dev
Tham khảo: