vue3 项目中引入tailwindcss

最新推荐文章于 2024-08-06 10:05:58 发布

孩子气呵呵特

最新推荐文章于 2024-08-06 10:05:58 发布

阅读量711

点赞数 4

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_39755186/article/details/137110274

版权

本文介绍了TailwindCSS的工作原理，包括如何通过npm安装，创建tailwind.config.js进行配置，以及在项目中如何应用其预设的CSS类。详细步骤包括安装、配置文件设置和在Vue组件中实际运用示例。

摘要由CSDN通过智能技术生成

Tailwind CSS 的工作原理是扫描所有 HTML 文件、JavaScript 组件以及任何模板中的 CSS 类（class）名，然后生成相应的样式代码并写入到一个静态 CSS 文件中。

官网：https://www.tailwindcss.cn/docs/installation

在项目中使用过程如下：

安装 tailwindcss

npm i -D tailwindcss@latest

创建tailwind.config.js 配置文件

npx tailwindcss init

在tailwind.config.js 进行配置

/** @type {import('tailwindcss').Config} */
module.exports = {
  //  配置要加载的模块
  content: ['./index.html','./src/**/*.{vue,js,ts,jsx,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
}

在src下创建一个tailwindcss模块，创建index.css模块，写如下代码：

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

在main.ts 中引入tailwindcss

import './tailwindcss/index.css'

在组件中应用

<template>
  <div class="w-screen h-screen bg-red-300 flex justify-center items-center text-blue-100">
    应用 tailwindcss，官网参考文档如下：https://www.tailwindcss.cn/docs/installation
  </div>
</template>