TailwindCSS使用报告

tailwindcss的使用问题

没有自动生成postcss.config.js文件，参考了几个视频之后，我认为原因在于官方文档的命令中npx tailwindcss init没有加上-p，我在加上之后就自动生成了

我的tailwindcss没有正常生效，通过AI的指引，我不断误入歧途，终于通过对照试验发现问题在于tailwind.config.js文件配置，英文教程里面直接复制官方文档进行配置，但是对于我的vscode却没有生效

(官方文档)

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

(另外一个教程，我改了之后才生效)

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

警告解决办法

如果你在使用tailwindcss的过程中，vscode提示Unknown at rule @tailwind，Unknown at rule @apply警告，可以在根目录下新建一个文件夹.vscode，在文件夹中新建一个文件settings.json，在文件中paste如下代码

{
  "files.associations": {
    "*.css": "tailwindcss"
  }
}

或者我在stackoverflow上看到别人提示说把nodejs升级到最新版本，我还没试过

警告虽然没了，但是我的语法提示还是没有啊o(╥﹏╥)o，我去试试升级nodejs

———刚刚去试了一下回来，结果把电脑的nodejs装废了，重装了几百次，┭┮﹏┭┮，痛苦面具了属于是。在系统上卸载nodejs好像不行，得手动删除那些文件再安装nvm。在这里放一个比较详细的安装流程吧[click][a]

好家伙，还是没提示QAQ

一天过去了~终于找到了一个有用的答案，跪谢大佬，放入settings.json

"tailwindCSS.includeLanguages": {
    "html": "html",
    "javascript": "javascript",
    "css": "css"
}.
"editor.quickSuggestions": {
    "strings": true
}

。。没错，过了好几天之后我又发现不生效了

多番查找我又看到了另外的解决方法

CTRL + SHIFT + P to bring up the command palette
Search for “Output: Focus on Output View”
In the Output View, search for tailwindcss-intellisense

eslint提示错误问题

愚蠢且没有什么用的eslint（我目前这么认为）报的错误和警告消除方法。可以在 ESLint 配置文件中添加环境设置，以使 ESLint 识别 CommonJS 模块的全局变量。你可以在你的 .eslintrc.js 或 .eslintrc.json 文件中添加 node 环境支持：

如果使用 .eslintrc.js 文件：

module.exports = {
  env: {
    node: true,
  },
  // 其他配置
};

如果使用 .eslintrc.json 文件：

{
  "env": {
    "node": true
  },
  // 其他配置
}

取消无聊的警告信息和any检查

"rules": {
    "@typescript-eslint/no-unused-vars": "off",
    "@typescript-eslint/no-explicit-any": "off"
}

图标icon字体font使用指南

在Google里面直接搜索Font Awesome，在里面直接复制链接即可使用。但是因为是国外的服务器，所以加载速度略慢好吧QAQ，之后有时间再找个中国的替代品吧。

使用渐变

via-green-900 是 Tailwind CSS 中用于设置渐变色的一个类。

解释：

bg-gradient-to-br: 表示背景是一个从左上角（top-left）到右下角（bottom-right）的渐变背景。
from-gray-900: 设定渐变的起始颜色（从左上角开始）为 gray-900，它是一个深灰色。
via-green-900: 设定渐变的中间颜色（渐变过渡的颜色）为 green-900，它是一个较深的绿色。这个颜色会在从左上角到右下角的渐变过程中起到过渡作用，创建一个平滑的颜色过渡。
to-emerald-900: 设定渐变的终止颜色（到右下角的位置）为 emerald-900，它是一个较深的翡翠绿色。

待解决问题：

使用字体渐变样式没办法生效

1 2	bg-gradient-to-r from-green-400 to-emerald-500 text-transparent bg-clip-text

使用line-clamp

当你使用 line-clamp 类来限制文本行数时，外部的 padding 可能会影响到文本的显示效果，导致文本无法正确地在固定的行数内显示。为了避免这个问题，可以为文本添加一个内部的包裹元素，并将 line-clamp-2 类应用到这个包裹元素上，这样即使外部有内边距，文本仍然能够按照预期显示为两行并显示省略号。

<ul class="max-w-md rounded-xl bg-white py-2 text-sm shadow-2xl">
    <li class="my-0.5 px-3 py-2 font-medium">
        <!-- 这个 div 是内部包裹元素 -->
        <div class="line-clamp-2">
            {{ currentUserAlias }}
        </div>
    </li>
    <!-- 以下部分与问题无关 -->
</ul>