Day8 - Astro Series: Tailwind integration

Astro 系列文第八日：實作整合 Tailwind

@ Astro

一个漂亮的渐变背景上面有一句标题：「整合 Tailwind」

前言

Tailwind 是一款 CSS 框架与学习 Astro 并无绝对关系，但基于它的社群热门程度与可以快速灵活导入样式的特性，何不来尝试运用看看呢？尝试导入 Tailwind 并且运用在建构元件样式上吧。

整合 Tailwind

在 Astro 中安装整合非常的简单，只需要在专案终端中输入 npx astro add tailwind 安装便会执行，都完成之后便可以开始在整个专案中使用 Tailwind：

Terminal window
Astro 将会执行以下指令:
如果你跳过这个步骤随时可以回来


 ╭─────────────────────────────────────────────────╮
 │ yarn add @astrojs/tailwind tailwindcss@^3.0.24  │
 ╰─────────────────────────────────────────────────╯
继续？ » (Y/n)


Astro 将会创建最基础的 ./tailwind.config.cjs 文件.
继续？ » (Y/n)


Astro 将会对配置文件做以下更动:
 ╭ astro.config.mjs ─────────────────────────────╮
 │ import { defineConfig } from 'astro/config';  │
 │                                               │
 │ import tailwind from "@astrojs/tailwind";     │
 │                                               │
 │ // https://astro.build/config                 │
 │ export default defineConfig({                 │
 │   integrations: [tailwind()]                  │
 │ });                                           │
 ╰───────────────────────────────────────────────╯
继续？ » (Y/n)

添加设定与套件

安装完成后可以透过专案根部自动建立的 tailwind.config.cjs 来添加设定或新增套件，以下是我通常会更动的设定：

更改预设 base.css 档案

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

预设 Tailwind 会自动将以上内容的 CSS 档案给注​​入到整个专案之中，自行创建一个 base.css 放在 src/style 资料夹中，这样要添加额外的全域 CSS 或是使用 [@layer](https://tailwindcss.com/docs/functions-and-directives#layer) 指令，或者是在某些页面不想预设引入这只档案的问题都能解决。具体会需要把 astro.config.mjs 中 applyBaseStyles 属性改为 false，再从元件中增添自己的 base.css。

  integrations: [
    tailwind({
      applyBaseStyles: false,
    }),
  ],

定义变数到 CSS 变数之中

头痛的是，有时候要写非常客制化的元件使用 Scoped CSS，但又要使用到 Tailwind 中定义的变数怎么办？没关系，它们两个依旧可以相处得很好！只需要将网站样式的 CSS 变数定义在 :root 上，这样不管何处的元件都能存取到该变数而非只局限于 Tailwind 上，Tailwind 设定档也可以设定引用 CSS 变数🔗。

添加 Tailwind 插件

  • @tailwindcss/typography🔗 - 基于静态网站经常存放文章文件等类型的资料，如果有一套好的样式可以让文件更好阅读，这个插件添加了一切你所需要的文章样式，并且可以依此为基准扩充。 （范例可参考我的部落格文章🔗）
  • tailwindcss-fluid-type🔗 - 如果你希望文字大小尺寸是依照装置尺寸来设置的，这个套件可以给你更进一步的控制文字在不同版面中显示的尺寸。 （范例可参考我的部落格标题🔗）

实作按钮

最后我们再用 Tailwind 的方式重构上次写的按钮，更换一下写法也能得到同样的结果，以下是我的方式：

interface Props {
  href?: string;
  theme?: keyof typeof themeClassList;
  size?: keyof typeof sizeClassList;
}


const { href, theme, size, ...rest } = Astro.props;
const Element = href ? 'a' : 'button';


// 定义主题种类
const themeClassList = {
  solid: '',
  outline: '',
  secondary: '',
  link: '',
};


// 定义尺寸種類
const sizeClassList = {
  md: '',
  lg: '',
  block: '',
};


// 决定当前主题与尺寸
const themeClass = theme ? themeClassList[theme] : themeClassList['solid'];
const sizeClass = size ? sizeClassList[size] : sizeClassList['md'];


// 默认主题与尺寸
const defaultButtonStyle = '';
---


<Element href={href} class:list={[defaultButtonStyle, themeClass, sizeClass]} {...rest}>
  <slot />
</Element>
<button>点击我</button>
<a href="/" size="block" theme="outline">点击我</button>

总结

这个章节更偏向我在 Astro 中使用 Tailwind 的历程心得，如果你没有打算导入 Tailwind 可以直接前往下一章节即可。透过两个章节都在练习写按钮，现在推荐你尝试撰写各式各样的元件熟悉使用 Astro，对你来说都不会是问题了。

延伸阅读