我使用的是官方文档指令npm init vue@latest安装的vue,所以跳过了tailwind文档的第1步。 所以我在新文件夹重新按照文档指令npm create vite@latest my-project -- --template vue安装了另一个vue项目,然后安装tailwind,最后果不其然, npm run dev成功运行。 我实在是理解不了,就去对比两个项目的差异: 结果两个...
AI代码解释 /** @type {import('tailwindcss').Config} */exportdefault{content:["./index.html","./src/**/*.{vue,js,ts,jsx,tsx}",],theme:{extend:{},},plugins:[],} 在这个例子中,我们扩展了颜色配置,添加了一个名为primary的自定义颜色;同时扩展了字体配置,添加了一个名为sans的自定义字体。
1. npm create vite@latest my-project -- --template vue 创建基础项目 2. npm install -D tailwindcss postcss autoprefixer 这里如果这么安装 应该是tailwind 版本原因 会导致下一步报错 所以我建议 tailwind 安装固定版本@3.4 3.npx tailwindcss init -p 创建配置文件 4. tailwind.config.js 中 /** @typ...
Ourwebsite templatesare built using Next.js, so all of the markup is written using React. Ourcomponentsare provided in three formats: React, Vue, and vanilla HTML. The React and Vue examples are fully interactive, and are powered byHeadless UI— a library of unstyled components we designed ...
想想为啥 vue 要创造个单文件组件的语法,把 js、css、template 放在一个文件里写,不就是为了紧凑么? 之前你要在 css、js 文件里反复跳来跳去的,查找某个 class 的样式是啥,现在不用这么跳了,直接在 html 里写原子样式,它不香么? 而且tailwindcss 就前面提到的那么几个语法,没啥学习成本,很容易看懂才对。
想想为啥 vue 要创造个单文件组件的语法,把 js、css、template 放在一个文件里写,不就是为了紧凑么? 之前你要在 css、js 文件里反复跳来跳去的,查找某个 class 的样式是啥,现在不用这么跳了,直接在 html 里写原子样式,它不香么? 而且tailwindcss 就前面提到的那么几个语法,没啥学习成本,很容易看懂才对。
</template> 如你所见,这是一个非常简单的 Vue 组件。像所有的 Vue 组件一样,我们拥有一个div包装器,以及两个子div。在第一个 div 区块里面我们有标题,以及新的 todoinput。我们已经input绑定到名为newTodo的v-model,并且我们在button中添加了一个名为add的方法,用来提交新的 todo。当input没有输入文本时,该...
在vue项目中使用 创建vue项目 pnpm create vue@latest 安装Tailwind CSS 安装及其对等依赖,然后生成tailwind.config.js和postcss.config.js文件 pnpm add -D tailwindcss postcss autoprefixer npx tailwindcss init -p 配置模板路径 修改tailwind.config.js
vue3示例: <template> <!-- columns-3xs:columns:16rem;/*256px*/。即就是说,1列的宽度是256px。 aspect-video:符合视频长宽比的一种长方形结构 aspect-square:一种偏向于正方形的结构 --> </
注意这里的关键词 —— 实用优先,这是 Tailwind 的最大亮点,不同于其他 CSS 框架(例如 Bootstrap、Foundation、Bulma 等)通过一个预设的「巨型」 class 包含一大堆样式属性,Tailwind 的每个 class 通常只会设置单个样式属性,你需要通...