vue3 tailwindcss的使用教程

Tailwind CSS

Tailwind是由Adam Wathan领导的TailwindLabs开发的 CSS 框架。

实用类

Tailwind 附带了大量实用类。将它们组合起来并调整样式是使用 Tailwind 进行样式设置的一大特点。实用类以相当小的单元准备，因此大多数样式都可以通过仅组合实用类来实现。

有这么多的类，你可能会认为很难记住这些类，但正如你在上面看到的，text-red-50 Tailwind 的实用类名称是这样命名的，这样你就可以很容易地想象要应用的样式。

vue3 tailwindcss的使用

首先安装依赖：

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
npm i -D unocss

然后vite.config.ts中 引入

 
import Unocss from 'unocss/vite'
export default defineConfig({
    plugins: [
        Unocss(),
    ],
})

终端执行：

npx tailwindcss init -p

会在项目根目录下面生成两个文件

 tailwind.config.js

module.exports = {
    content: [
        "./index.html",
        "./src/**/*.{vue,js,ts,jsx,tsx}",
    ],
    theme: {
        extend: {},
    },
    plugins: [],
}

postcss.config.js

module.exports = {
    plugins: {
        tailwindcss: {},
        autoprefixer: {},
    },
}

完成以上步骤就可以在标签中直接使用 tailwind 提供的相关类名了。

VScode 安装插件 Tailwind CSS IntelliSense 会有代码提示

到此这篇关于vue3 tailwindcss的使用的文章就介绍到这了,更多相关vue3 tailwindcss使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！