`如何在项目中使用 Tailwind CSS？`

所有内容基于 Tailwind 3.4.1，这是我的 GitHub 仓库。

好消息，你可以访问我部署的网站这里

前置条件

学习背景

首先我学习了一个基础的 CSS 课程，由 Dave Gray 主讲（感谢他），其次在学习过程中产生的想法是，我可以用其他技术重写这个项目，用 Vue 和 TypeScript 替换 HTML，用 Tailwind CSS 替换 CSS。

所以这篇文章是总结，记录所有的关键点，你会在这里受益匪浅。

安装 Tailwind CSS

如果你想创建一个新项目，你可以阅读这篇文章，然后通过阅读这个教程安装 Tailwind CSS。

你也可以跳过上述所有步骤，只需执行以下命令，

pnpm add -D tailwindcss postcss @tailwindcss/postcss

包名	功能
tailwindcss	Tailwind 核心
postcss	CSS 编译器，用于运行 Tailwind
@tailwindcss/postcss	Tailwind v4 PostCSS 集成插件（必需）

postcss.config.js
export default {
  plugins: {
    '@tailwindcss/postcss': {},
  },
}

src/index.css
@import "tailwindcss";

/* @layer base {
    select,
    textarea,
    input {
        all: revert;
    }
} */

示例提交

Tailwind 使用

我会跳过大多数简单的用法，你可以在官方网站查阅。

`margin-bottom`

如果你想定义 margin-bottom 间距，自定义定义如下，

.mb-4 {
    margin-bottom: 1rem/* 16px */;
}

所有文章将省略 HTML 中使用的基础 CSS。

Tailwind CSS，

<div class="mb-4">
      <!--  ... -->
</div>

另一个更复杂的例子，如果你想声明一个带有 clamp 函数的间距，这个 clamp(1em, 2.5vh, 1.5em) 0 是设置一个元素的边距，它将在 1em 和 1.5em 之间变化，首选值为 2.5vh，初始边距为 0。实际边距将取决于视口大小以及它如何适应指定的范围。

2.5vh 相当于视口高度的 2.5%。这是一个响应式单位，根据用户的视口高度（浏览器中的可见区域）进行调整。

自定义 CSS

.mb-clamp {
    margin-bottom: clamp(1em, 2.5vh, 1.5em) 0;
}

tailwind css

<div class="m-[clamp(1em,2.5vh,1.5em)_0] ">
      <!--  ... -->
</div>

`text-shadow`

自定义 CSS

.custom-shadow {
    text-shadow: 2px 2px 5px #333;
}

Tailwind CSS

<div class="[text-shadow:2px_2px_5px_#333]">
      <!--  ... -->
</div>

`font-family`

如果你想设置字体族，自定义 CSS 如下

.custom-font-family {
    font-family: Fugaz One, cursive;
}

In tailwind css, you need put config into you tailwind.config.ts

export default {
  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  darkMode: 'class',
  theme: {
    extend: {
      fontFamily: {
        headings: ['Fugaz One', 'cursive'],
      },
    },
  },
  plugins: [],
} satisfies Config

并在 HTML 中使用，

<div class="font-headings">
      <!--  ... -->
</div>

`border`

自定义 border 复合 CSS

.div {
  border: 1px solid #999;
}

但是没有复合的 Tailwind CSS 样式，需要通过多个字段定义

<div class="border-solid border border-black"></div>

`animate`

这个自定义 CSS 定义了一个动画，从顶部 -100px 向下移动到窗口。

.hero__h2 {
    top: -100px;
    animation: showWelcome 0.5s ease-in-out 1s forwards;
}

@keyframes showWelcome {
    0% {
        top: -20px;
        transform: skew(0deg, -5deg) scaleY(0);
    }

    80% {
        top: 30px;
        transform: skew(10deg, -5deg) scaleY(1.2);
    }

    100% {
        top: 20px;
        transform: skew(-10deg, -5deg) scaleY(1);
    }
}

In tailwind css, you need put config into you tailwind.config.ts

export default {
  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}']
  theme: {
    extend: {
      keyframes: {
        showWelcome: {
          '0%': {
            top: '-20px',
            transform: 'skew(0deg, -5deg) scaleY(0)',
          },

          '80%': {
            top: '30px',
            transform: 'skew(10deg, -5deg) scaleY(1.2)',
          },

          '100%': {
            top: '20px',
            transform: 'skew(-10deg, -5deg) scaleY(1)',
          },
        },
      },
    },
  },
  plugins: [],
} satisfies Config

在 HTML 中使用动画

<div class="animate-[showWelcome_0.5s_ease-in-out_1s_forwards]">
      <!--  ... -->
</div>

伪类 `first-child` 和 `last-child`

自定义 CSS

.main__article:first-child {
    margin-top: 1em;
}

.main__article:last-child {
    min-height: calc(100vh-20rem);
}

Tailwind CSS

<div class="first:mt-4 last:min-h-[calc(100vh-20rem)]">
      <!--  ... -->
</div>

Style an element if it’s the first child of its type using the first-of-type modifier, you need define this way.
<div class="first-of-type:mt-4 last-of-type:min-h-[calc(100vh-20rem)]">
      
</div>
注意函数的使用，在 last-of-type:min-h-[calc(100vh-20rem)] 中不能包含空格，如果你确实想添加空格，请使用 last-of-type:min-h-[calc(100vh_-_20rem)] 代替 last-of-type:min-h-[calc(100vh - 20rem)]。

伪类 `before` 和 `after`

使用伪类 before 或 after 通过自定义 CSS 添加一些内容，自定义 CSS

.header__h1::before {
    content: '🌮 '
}

.header__h1::after {
    content: ' 🌮'
}

Tailwind CSS

<div class="before:content-['🌮'] after:content-['🌮']">
      <!--  ... -->
</div>

'🌮' 必须使用单引号，🌮 不会生效。

`@media` 查询

自定义 CSS

@media screen and (min-width: 576px) {
    .header__h1::before {
        content: '🌮 '
    }

    .header__h1::after {
        content: ' 🌮'
    }

    .menu__header,
    .menu__cr,
    .menu__sf,
    .menu__cs {
        font-size: 125%;
    }
}

use in tailwind css

<div class="min-[576px]:before:content-['🌮'] min-[576px]:after:content-['🌮']">
      <!--  ... -->
</div>

它看起来更简洁，我喜欢这个。

文字颜色透明度

直接使用 text-black/[.6] 代替 text-[rgba(0, 0, 0, 0.6)]，因为后者还不支持。

如果颜色是 rgba(52, 178, 52, 0.75)，首先你应该将其转换为十六进制颜色，然后使用 text-[#34b234bf]。

这里给个例子，自定义 CSS

.header__h1 {
    color: rgba(52, 178, 52, 0.75);
}

tailwind css

<div class="text-[#34b234bf]">
      <!--  ... -->
</div>

`text-shadow`

自定义 CSS，

:root {
    --BORDER-COLOR: #333;
}

@media (prefers-color-scheme: dark) {
    :root {
        --BORDER-COLOR: whitesmoke;
    }
}

.hero__h2 {
    text-shadow: 2px 2px 5px var(--BORDER-COLOR);
}

tailwind css,

<div class="[text-shadow:2px_2px_5px_#333] dark:[text-shadow:2px_2px_5px_white]">
      <!--  ... -->
</div>

`box-shadow`

自定义 CSS

:root {
    --BORDER-COLOR: #333;
}

@media (prefers-color-scheme: dark) {
    :root {
        --BORDER-COLOR: whitesmoke;
    }
}

body {
    box-shadow: 0 0 10px var(--BORDER-COLOR);
}

tailwind css,

<div class="shadow-[0_6px_5px_-5px_#333] dark:shadow-[0_6px_5px_-5px__whitesmoke]">
      <!--  ... -->
</div>

有时候你可以用单独的方式定义，更多详情请查看这里，

下面我给出 Tailwind CSS 在 React 中的示例，相关样式 shadow-lg shadow-cyan-500/50 opacity-85，定义 box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);

以及边框颜色、盒子透明度。

<div className="text-center text-2xl font-bold mt-4 p-2 border border-purple-400 border-solid shadow-lg shadow-cyan-500/50 bg-cyan-500 opacity-85">
  {tips}
</div>

问题修复

图片不显示

我在 Vue 文件中使用了静态图片，一旦部署到 GitHub Pages 图片就消失了，因为 vite 没有将 src/assets/img/tacos_delicioso_1000x667.png 包含在内，我查看了 Vite 官网上的解决方案，以下两种方法都有效，选择你喜欢的一种即可。这是解决方案的提交记录。

第一种方法

const img = new URL('@/assets/img/tacos_delicioso_1000x667.png', import.meta.url).href

第二种方法

// 但这会报错，所以我更喜欢第一种方法
// Cannot find module '@/assets/img/tacos_and_drink_1000x667.png' or its corresponding type declarations.
import img from '@/assets/img/tacos_delicioso_1000x667.png'

页面丢失所有样式

因为 postcss.config.js 配置错误，我删除了 tailwindcss: { config: './tailwind.config.ts' }, 这一行；

你可以查看官方指南，这是解决方案的提交记录。

module.exports = {
  plugins: {
    // 配置位置，默认是 tailwind.config.js，这里必须指明文件名
    tailwindcss: { config: './tailwind.config.ts' },
    autoprefixer: {},
    cssnano: {},
    // 嵌套 CSS
    'tailwindcss/nesting': 'postcss-nesting',
    'postcss-preset-env': {
      features: { 'nesting-rules': false },
    },
    // 生产环境优化，压缩 CSS
    ...(process.env.NODE_ENV === 'production' ? { cssnano: {} } : {}),
  },
}

总结

大约 20 天的学习和重写这个项目，也许项目太小了，但我学到了很多关于 Tailwind CSS、Vue 的知识。我希望你继续前进，你会发现解锁时尚的 Tailwind CSS。

感谢你的时间。如果我的文章对你有帮助，请给我点赞。也欢迎提出任何问题。

协议

本作品代码部分采用Apache 2.0协议进行许可。遵循许可的前提下，你可以自由地对代码进行修改，再发布，可以将代码用作商业用途。但要求你：

署名：在原有代码和衍生代码中，保留原作者署名及代码来源信息。
保留许可证：在原有代码和衍生代码中，保留Apache 2.0协议文件。

本作品文档部分采用知识共享署名 4.0 国际许可协议进行许可。遵循许可的前提下，你可以自由地共享，包括在任何媒介上以任何形式复制、发行本作品，亦可以自由地演绎、修改、转换或以本作品为基础进行二次创作。但要求你：

署名：应在使用本文档的全部或部分内容时候，注明原作者及来源信息。
非商业性使用：不得用于商业出版或其他任何带有商业性质的行为。如需商业使用，请联系作者。
相同方式共享的条件：在本文档基础上演绎、修改的作品，应当继续以知识共享署名 4.0国际许可协议进行许可。

前置条件​

学习背景​

安装 Tailwind CSS​

Tailwind 使用​

margin-bottom​

text-shadow​

font-family​

border​

animate​

伪类 first-child 和 last-child​

伪类 before 和 after​

@media 查询​

文字颜色透明度​

text-shadow​

box-shadow​

问题修复​

图片不显示​

页面丢失所有样式​

总结​

前置条件

学习背景

安装 Tailwind CSS

Tailwind 使用

`margin-bottom`

`text-shadow`

`font-family`

`border`

`animate`

伪类 `first-child` 和 `last-child`

伪类 `before` 和 `after`

`@media` 查询

文字颜色透明度

`text-shadow`

`box-shadow`

问题修复

图片不显示

页面丢失所有样式

总结