🇹🇼

安裝 Tailwind CSS 和相關 ESLint、Prettier 設定 - Modern Next.js Blog 系列 #09

Published on

本文同步發佈於 it 邦幫忙 2022 iThome 鐵人賽

​
TL;DR

這是「Modern Blog 30 天」系列第 9 篇文章，上一篇我們讓 Contentlayer 也支援了 MDX 格式。這篇讓我們來安裝 Tailwind CSS 這套 CSS 工具，設定好對應的 ESLint, Prettier 規則，準備開始美化畫面！

結果截圖如下：

Index Page result of Tailwind CSS

這篇修改的程式碼如下：

https://github.com/Kamigami55/nextjs-tailwind-contentlayer-blog-starter/compare/day08-mdx-support...day09-install-tailwindcss

​
安裝 Tailwind CSS

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

微調 /tailwind.config.js：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

微調 /postcss.config.js：

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

修改 /src/styles/globals.css，刪除所有內容，替換成這三行：

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

​
在首頁套用基本樣式，試用看看 Tailwind CSS

移除 /src/styles/Home.module.css。

修改 /src/pages/index.tsx，改成下面這樣：

import type { NextPage } from "next";
import Head from "next/head";

import { allPostsNewToOld, Post } from "@/lib/contentLayerAdapter";

export function getStaticProps() {
  const posts = allPostsNewToOld;
  return { props: { posts } };
}

type Props = {
  posts: Post[];
};

const Home: NextPage<Props> = ({ posts }) => {
  return (
    <div>
      <Head>
        <title>My blog</title>
        <meta name="description" content="Welcome to my blog" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className="p-4">
        <h1 className="mb-6 text-4xl font-bold">Welcome to my blog!</h1>

        <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
          {posts.map((post) => (
            <div key={post.slug} className="rounded-lg border border-black p-6">
              <a href={post.path}>
                <h2 className="mb-4 text-2xl font-semibold">{post.title}</h2>
                <p>{post.description}</p>
              </a>
            </div>
          ))}
        </div>
      </main>
    </div>
  );
};

export default Home;

修改 /src/pages/[slug].tsx，改成下面這樣：

import { format, parseISO } from "date-fns";
import type { GetStaticPaths, GetStaticProps, NextPage } from "next";
import Head from "next/head";
import { useMDXComponent } from "next-contentlayer/hooks";

import { allPosts, Post } from "@/lib/contentLayerAdapter";

export const getStaticPaths: GetStaticPaths = () => {
  const paths = allPosts.map((post) => post.path);
  return {
    paths,
    fallback: false,
  };
};

export const getStaticProps: GetStaticProps<Props> = ({ params }) => {
  const post = allPosts.find((post) => post.slug === params?.slug);
  if (!post) {
    return {
      notFound: true,
    };
  }
  return {
    props: {
      post,
    },
  };
};

type Props = {
  post: Post;
};

const PostPage: NextPage<Props> = ({ post }) => {
  const MDXContent = useMDXComponent(post.body.code);

  return (
    <div>
      <Head>
        <title>{post.title}</title>
        <meta name="description" content={post.description} />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main>
        <h1>{post.title}</h1>

        <time dateTime={post.date}>
          {format(parseISO(post.date), "LLLL d, yyyy")}
        </time>

        <MDXContent />
      </main>
    </div>
  );
};

export default PostPage;

​
安裝 Tailwind CSS 相關 ESLint, Prettier 規則

pnpm add -D eslint-plugin-tailwindcss prettier-plugin-tailwindcss

修改 .prettierrc.js，加入 prettier-plugin-tailwindcss 這個 plugin，最後結果如下：

module.exports = {
  trailingComma: "es5",
  singleQuote: true,
  printWidth: 80,
  semi: true,
  plugins: ["prettier-plugin-tailwindcss"],
};

修改 .eslintrc.js：

module.exports = {
  extends: [
    "eason",
    "next/core-web-vitals",
    "plugin:tailwindcss/recommended",
    "plugin:prettier/recommended", // Make this the last element so prettier config overrides other formatting rules
  ],
  plugins: ["tailwindcss"],
  rules: {
    "jsx-a11y/anchor-is-valid": [
      "error",
      {
        components: ["Link"],
        specialLink: ["hrefLeft", "hrefRight"],
        aspects: ["invalidHref", "preferButton"],
      },
    ],
    "tailwindcss/classnames-order": "off", // Respect prettier-plugin-tailwindcss order
  },
  settings: {
    // Support absolute imports
    // https://www.npmjs.com/package/eslint-import-resolver-alias
    "import/resolver": {
      alias: {
        map: [["@", "./src"]],
        extensions: [".js", ".jsx", ".ts", ".tsx"],
      },
    },
    "import/ignore": ["contentLayerAdapter.js"],
  },
  overrides: [
    {
      files: "**/*.{ts,tsx}",
      extends: [
        "eason/typescript",
        "plugin:prettier/recommended", // Make this the last element so prettier config overrides other formatting rules
      ],
    },
  ],
};

​
成果

完成了！使用 pnpm dev 並進入首頁，就會看到首頁樣式改變了，全部都是由 Tailwind CSS 的 Utility classes 實現的樣式！

結果如下：

Index Page result of Tailwind CSS

這篇修改的程式碼如下：

https://github.com/Kamigami55/nextjs-tailwind-contentlayer-blog-starter/compare/day08-mdx-support...day09-install-tailwindcss

​
References

https://tailwindcss.com/docs/guides/nextjs

​
下一篇

恭喜你！我們成功在 Next.js 專案安裝了 Tailwind CSS 和對應的 ESLint, Prettier 規則了，並簡單試用了一下。

下一篇我們會再加入 Modern Blog 必備的要素：暗黑模式！也是使用 Tailwind CSS 實現的。

實作完之後就會開始真正美化全站的樣式了！