dumi: 文档工具 - 基本使用/tailwind

$ npx create-dumi
# 选择 Static Site - docs 一般用这个

## info
- name: rails-snippets
- desc: Rails code snippets.
- aric.zheng 1290657123@qq.com
- npm client: pnpm(这个有500MB的包，所以，用这个)

一图胜千言

相关重要的配置如下，选择 Static Stite

有一个 husky 的 warning 需要处理

$ gg "feat: init index"
hint: The '.husky/pre-commit' hook was ignored because it's not set as executable.
hint: You can disable this warning with `git config set advice.ignoredHook false`.
hint: The '.husky/commit-msg' hook was ignored because it's not set as executable.
hint: You can disable this warning with `git config set advice.ignoredHook false`.

处理方式

$ chmod +x .husky/*

安装相关的依赖

yarn add --dev @umijs/plugins ...

# 依赖列表
"@umijs/plugins": "^4.6.25",
"autoprefixer": "^10.4.24",
"postcss": "^8.5.6",
"tailwindcss": "^3.4.19",

更新配置 .dumirc.ts

import { defineConfig } from 'dumi';

export default defineConfig({
  base: '/dumi-docs/',
  // .... 省略10000 行
  plugins: ['@umijs/plugins/dist/tailwindcss'],
  tailwindcss: {},
});

Tailwind 配置 tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./docs/**/*.{md,mdx}'],
  theme: {
    extend: {},
  },
  plugins: [],
};

Tailwindcss

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

添加一段测试代码，这里我安装了 @jswork/presets-tailwind 插件

## Tailwind Demo

<div class="debug x-5 p-2 hover:debug-blue rounded bg-slate-100">
  <button class="bg-blue-500 text-white px-4 py-2 rounded-md">Get Started</button>
  <button class="bg-red-200 px-4 py-2 rounded-md">Show Demo</button>
</div>