关于在vue3和原生Html中使用Tailwind CSS

发表于 |

前言

Tailwind CSS封装了一套可用于多框架高复用性CSS样式, 能大大简化网页css编写, 具体可参考官网:

官网: 点击进入

image-20230428175340392

在Vue3中使用Tailwind CSS

要在Vue 3中使用Tailwind CSS，需要执行以下步骤：

  1. 安装Tailwind CSS和其它必要的库
1
npm install tailwindcss postcss autoprefixer
  1. 创建并配置 postcss.config.js 文件以使用 Tailwind 和 Autoprefixer。将以下内容添加到该文件中：
1
2
3
4
5
6
module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer')
  ]
}
  1. 在 src/assets/css 目录下创建一个新文件 tailwind.css, 并添加以下代码：
1
2
3
@tailwind base;
@tailwind components;
@tailwind utilities;
  1. 将 tailwind.css 导入到 Vue 组件中, 比如在 App.vue 中：
1
2
3
4
5
6
7
8
9
10
11
12
13
<template>
  <div>
    ...
  </div>
</template>

<script>
import '@/assets/css/tailwind.css'

export default {
  name: 'App'
}
</script>
  1. 确保在项目的 main.js 文件中引入全局样式：
1
import '@/assets/css/main.css'
  1. 配置 vue.config.js 文件以启用 PostCSS。如果还没有该文件，则创建一个新的，并添加以下内容：
1
2
3
4
5
6
7
8
9
10
11
module.exports = {
  css: {
    loaderOptions: {
      postcss: {
        config: {
          path: './postcss.config.js'
        }
      }
    }
  }
}
  1. 运行 npm run serve 后，在浏览器中查看应用程序，Tailwind CSS 应该已经生效了。

例如，您可以在组件中使用以下代码来应用 Tailwind CSS 类：

1
2
3
4
5
<template>
  <div class="flex justify-center items-center h-screen bg-gray-100">
    <h1 class="text-4xl font-bold text-indigo-600">Hello, World!</h1>
  </div>
</template>

这将显示一个居中对齐的灰色背景的页面，其中包含一条带有粗体和蓝色文本的标题。

在原生Html中使用Tailwind CSS

要在原生 HTML 中使用 Tailwind CSS，需要遵循以下步骤：

  1. 在 HTML 文件中添加 Tailwind 的 CDN 链接。可以通过将以下代码放入 HTML 文件的 <head> 标签内来实现：
1
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.15/dist/tailwind.min.css" rel="stylesheet">
  1. 现在可以在 HTML 文件中使用 Tailwind 的类名称了。例如，要将一个元素的文本颜色设置为红色，可以添加以下代码：
1
<p class="text-red-500">这是一段红色的文本。</p>
  1. 可以在 Tailwind 的官方文档中找到更多的类和用法示例。

注意：在使用 Tailwind 时，请确保您已经了解其工作原理并能够正确地使用它的类名称。如果您不熟悉 Tailwind，请先阅读其文档，以免出现不必要的错误。

总结

如果需要在vue中全局使用Tailwind CSS, 可以考虑使用安装插件的方式, 一旦使用 那么其他自定义的style将会失效

如果是指某个模块使用, 建议使用原始的css文件导入的方式

问题

在vue中使用时报错:

1
2
3
Syntax Error: Error: PostCSS plugin tailwindcss requires PostCSS 8.
Migration guide for end-users:
https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users

解决方案:

1
2
3
4
5
//卸载之前版本
npm uninstall tailwindcss postcss autoprefixer
 
//安装指定兼容版本
npm install tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

本文为作者原创转载时请注明出处 谢谢

乱码三千 – 点滴积累 ,欢迎来到乱码三千技术博客站

0%