2. Tailwind UI:精美的 UI 组件库 Tailwind UI 是一个为 Tailwind CSS 打造的官方 UI 组件库,它提供了一系列高质量的、可重用的 UI 组件。以下是我对 Tailwind UI 的一些夸赞: 2.1 一致的设计风格:Tailwind UI 的组件都遵循一致的设计风格,使你的应用看起来非常专业。无论你是构建管理面板、博客、电子商务网...
cd vue-tailwind-app npm install 安装Tailwind CSS 安装 Tailwind CSS 和相关依赖: npm install -D tailwindcss@latest postcss@latest autoprefixer@latest npx tailwindcss init -p 创建完成,目录结构如下: 配置Tailwind CSS 打开 tailwind.config.js 文件并修改为: 实例 /** @type {import('tailwindcss').Con...
/* src/assets/styles.css */@tailwindbase;@tailwindcomponents;@tailwindutilities; 然后在 src/assets/main.js 中导入该文件: import'./assets/styles.css 创建Vue 组件和样式 现在,你可以开始编写你的 Vue 3 组件,并使用 Tailwind CSS 来美化页面。 App.vue App.vue 是应用的主要组件,它包含了 Vue 3 和...
};/**@type{import('tailwindcss').Config} */module.exports= {// 增加前辍避免样式冲突prefix:'zhs-',// 注意此处,一定要 `path.resolve` 一下, 传入绝对路径// 你要有其他目录,比如 components,也必须在这里,添加一下content: ["./index.html","./pages/**/*.{html,js,ts,jsx,tsx,vue}","....
生产环境CSS体积减少60% 2. 按需引入第三方库 使用@headlessui/vue实现无障碍组件: npm install @headlessui/vue 示例代码: <Menu as="div" class="relative"> <MenuButton class="btn-primary">操作菜单</MenuButton> <MenuItems class="absolute mt-2 w-48 bg-white shadow-lg rounded-lg"> <MenuItem...
tailwindcss官方文档:https://tailwindcss.com/ 2.6 uv-ui 说到uv-ui,就不得不先从uni-ui和uView说起。uni-ui、uView和uv-ui都是uni-app生态下专用的组件库。 uni-ui 是DCloud官方提供的跨端ui库,它是基于vue组件的、flex布局的、无dom的跨全端ui框架。
npm init vue@latest 该指令模板在assets文件里有两个css文件、无style.css文件、且组件中样式复杂,选择器和属性涉及较多 npm create vite@latest my-project -- --template vue 该指令模板在assets文件夹中无css,且有一个style.css(并非像tailwind文档所说需要创建一个文件)、且组件中样式简单,只有基本的选择器...
Equal UI 是一个基于 Tailwind CSS 构建的 Vue 3 组件库,为开发者提供了超过 30 个高质量的组件选择。此组件库不仅支持内置的深色主题模式,还允许用户进行全面的自定义设置。通过丰富的代码示例,Equal UI 展现了其在 Vue 生态系统中的一流视觉效果,帮助读者更直观地理解和应用这些组件。
将CSS看作一套可重用的样式“工具”或模块,每个类只对应一个特定的样式效果,同时可以自定义,比如:我定义当前页面的bg-blue-500对应的颜色定制为yellow,类似于送人时候,送两个果篮,一个果篮想放青苹果🍏,另外一个想放红苹果🍎。 TailwindCSS Star
下面贴出学院君基于 Tailwind CSS 实现的博客应用页面布局最终 UI 界面效果图: 下面是相关的前端资源页面,主要调整的是视图模板resources/views/app.blade.php,以及resources/js/components目录下的 Vue 单页面组件: 注意到我们这里新增了一个文章详情页命名路由: ...