tailwindcss 都4.0.10 了你还在看3.4.17 的文档不出问题才怪

10年前端老司机
412 阅读3分钟

今天在用tailwindcss 时候，执行 npx tailwindcss init发现报错了！懵逼，我是跟着官方文档来的啊！怎么会报错呢？

遇到错误，排查过程

先执行下面命令创建了个Vue3项目：

pnpm create vite tailwind --template vue cd tailwind pnpm i

安装tailwindcss pnpm i tailwindcss -D

到这里一切正常,接下来初始化tailwindcss

npx tailwindcss init

这时候就突然报错了！

image.png

懵逼呀，怎么会报这种错呢？ 是不是因为我使用pnpm 安装的tailwindcss 而初始化使用的是npx的原因呢？于是我尝试使用pnpm tailwindcss init 试一试， 发现还是不好使。于是我又执行了pnpm unstall tailwindcss 进行了卸载。然后使用npm 安装tailwindcss, 在执行npx tailwindcss init 还是不好使。于是我开始了问百度，看下有没有哪位大佬遇到过这个问题。我看到了以下回答：

百度ai :

image.png

大概就是说可能是你的npm 和node 没装或者版本太低的问题，tailwindcss 是不是最新版本的问题。我的node 版本是20.7.0 ，npm 版本是10.8.3 这两个版本低的可能性不大，tailwindcss 刚装的版本低也不太可能。

解决方案一（降版本）

于是我再继续看其他人遇到没有？找到了一个比较靠谱一点的

image.png

我按照他的说法去做把tailwindcss 降到了3.4.17 确实能解决问题。

image.png

但是心里有点不舒服啊！tailwindcss 最新版本明明已经4.0了，我还要用3.0的，这官方文档不是坑人吗？但是我想了一下，根据以往的经验，一般英文文档的更新速度都比中文的快，是不是因为中文的还没更新呢？于是我把www.tailwindcss.cn 域名改成了www.tailwindcss.com ,根据经验一般英文文档都是点com,中文文档都是点cn. 进来一看果然文档不一样了。中文文档是这样的

image.png

解决方案二、（看最新文档）

英文文档是这样的。 image.png

发现 Tailwind CLI 的选项都被被排到了第三个去了，第一个变成了Using Vite ，说明在4.0版本中官方推荐的是使用vite 插件的形式了。按照操作步骤来尝试下：

先将之前的卸载掉在，pnpm unintall tailwindcss

安装 tailwindcss 和@tailwindcss/vite 插件

pnpm install tailwindcss @tailwindcss/vite

配置@tailwindcss/vite，vite.config.js

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import tailwindcss from "@tailwindcss/vite";

// https://vite.dev/config/
export default defineConfig({
  plugins: [vue(), tailwindcss()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "src"),
    },
  },
});

导入tailwindcss 到一个公共css文件

image.png

编写测试代码：

<template>
  <div>
    <button class="rounded-[4px] bg-blue-400 outline-0 text-white px-[20px] py-[10px]">按钮</button>
  </div>
</template>
<script setup>

</script>

<style scoped>
</style>

查看效果：

image.png

说明我们引入成功了。

提交效率： 安装Tailwind CSS IntelliSense 插件

tailwindcss 开发一般还需要一个vscode插件

  1. 因为类名实在太多了，我们记不住那么多，
  2. 我们不太清楚这些样式类名生成的样式是什么样的。

安装 Tailwind CSS IntelliSense

vscode 插件搜素 Tailwind CSS IntelliSense，点击安装即可。

image.png

写个样式看看有没有提示

image.png 可以看到已经有提示了，并且还可以看到生成的样式，

image.png

新手体验

我们来用tailwindcss 来开发一个稍微复杂一点东西吧，比如导航，体验下tailwindcss

<template>
  <div>
    <nav class="flex items-center shadow-[0_0_5px_5px] shadow-gray-100 max-[768px]:flex-col">
      <a href="javascript:void(0)" @click="setNav(index)" class="p-[20px] max-[768px]:block max-[768px]:w-full" v-for="(item, index) in navList" :key="index" :class="{'text-white bg-amber-800': curr === index}">{{ item }}</a>
    </nav>
  </div>
</template>
<script setup>
import { ref } from 'vue'
const navList = [
  '推荐',
  '国际',
  '国内',
  '娱乐',
  '军事',
  '科技'
]

const curr = ref(0)
const setNav = (index) => {
  curr.value = index
}
</script>

<style scoped>
</style>

image.png

我们这个效果还是适配移动端的，移动端竖着排：

image.png

总结

  • 跟着文档操作，出现问题的时候，很有可能是文档没更新，特别是中文文档，如果看的是中文文档可以查看下有没有英文文档。
  • 安装 Tailwind CSS IntelliSense 可以提高开发效率
  • 新手体验Tailwind 开发导航案例，体验Tailwind 的强大，几乎直接在html结构上可以发出的我们所需要的效果，不需要写额外的样式。
avatar
文章
阅读
粉丝