Cài đặt Tailwind CSS với Gatsby

Thiết lập Tailwind CSS trong dự án Gatsby.

Tạo dự án của bạn

Bắt đầu bằng cách tạo một dự án Gatsby mới nếu bạn chưa thiết lập. Cách phổ biến nhất là sử dụng Gatsby CLI.

Terminal

gatsby new my-projectcd my-project

Cài đặt Tailwind CSS

Sử dụng npm, cài đặt @tailwindcss/postcss, các peer dependencies, và gatsby-plugin-postcss.

Terminal

npm install @tailwindcss/postcss tailwindcss postcss gatsby-plugin-postcss

Bật plugin Gatsby PostCSS

Trong file gatsby-config.js của bạn, bật gatsby-plugin-postcss. Xem tài liệu của plugin để biết thêm thông tin.

gatsby-config.js

module.exports = {  plugins: [    'gatsby-plugin-postcss',    // ...  ],}

Cấu hình PostCSS Plugins

Tạo file postcss.config.js ở thư mục gốc của dự án và thêm plugin @tailwindcss/postcss vào cấu hình PostCSS của bạn.

postcss.config.js

module.exports = {  plugins: {    "@tailwindcss/postcss": {},  },};

Import Tailwind CSS

Tạo file ./src/styles/global.css và thêm @import cho Tailwind CSS.

global.css

@import "tailwindcss";

Import file CSS

Tạo file gatsby-browser.js ở thư mục gốc của dự án nếu chưa có, và import file./src/styles/global.css vừa tạo.

gatsby-browser.js

import './src/styles/global.css';

Bắt đầu quá trình build

Chạy quá trình build với gatsby develop.

Terminal

gatsby develop

Bắt đầu sử dụng Tailwind trong dự án của bạn

Bắt đầu sử dụng các utility class của Tailwind để style nội dung của bạn.

index.js

export default function IndexPage() {  return (    <Layout>      <h1 className="text-3xl font-bold underline">        Hello world!      </h1>    </Layout>  )}