现在很多人应该真香了吧，tailwind发展的很好。让我最感到欣慰的是它是一个由副业成功转型的案例，找到了...
复制 /** @type {import('tailwindcss').Config} */module.exports={content:["./src/**/*.{html,js}"],theme:{extend:{},},plugins:[],} 我们主要介绍下content: ["./src/**/*.{html,js}"],这行配置告诉 Tailwind CSS 搜索项目中的./src目录下所有扩展名为.html和.js的文件。**是一个通配...
</template> aspect-ratio插件使用方法 生成一个常用视频(16:9)的比例盒子: 又爱又恨的Preflight特性 preflight是TailwindCSS内置的一套全局样式,其作用类似于 normalize.css / modern-normalize (TailwindCSS建立在modern-normalize之上)。 preflight主要修改的全局样式情况: 为所有元素设置box-sizing为border-bo...
尽管tailwind 提供了多种安装方式,为了快速上手我们使用最简单的 npm 安装。 #创建新目录 mkdir tailwind-template cd tailwind-template #初始化项目配置 npm init -y #安装 TailwindCss npm install -D tailwindcss #初始化tailwincss配置文件 npx tailwindcss init #使用编辑器打开目录 code . 配置tailwind.confi...
theme 中的大多数属性值，都是 css 属性值，只有少数几个值是表示配置项，具体内容不用刻意去记忆，只...
Minimal Admin Template Screenshot Landing Page Ghostwind Minimal Blog Minimalist Blog Show all templates Promoted Content AFFILIATE SCHEME Coming Soon Kit [$] AFFILIATE SCHEME Cruip Template Pack [$] AFFILIATE SCHEME Dashwind UI [$] AFFILIATE SCHEME ...
farthe cleanest template and the most well structured. The most well thought out design theme I have ever used. The codes are up to standard. The css styles are very clean. In fact the cleanest andthe most up to standard I have ever seen. This is also the easiest template to customize...
</template> 启动vite 开发服务 pnpm run dev 3、适配 设计稿 ,并适配多机型 配置tailwind.config.js theme 以我们团队设计稿为例, 以 750px 为最大宽度 ,长度,字体的单位都是 px 。为了适配设计稿,我们需要实现一些类来匹配。 比如w-100 对应 width: 100px ; h-200 对应 height...
template 都是复制粘贴,page 名还没改,一旦切到这页面再切到其他页面就会覆盖某些样式 …… 产生极其强大的魔法 虽然标签里的 class 会变得很臃肿。但单看 DOM 结构,这是良好符合 WAI-ARIA 规范的。有以下好处: 不用纠结命名,从此告别xxx-wrapper、xxx-title、xxx-list、xxx-item ...
theme: { extend: {}, }, plugins: [], } 3. 在项目 css 中引入 tailwind 指令 我们在项目的主css入口,引入如下的指令。 @tailwind base; @tailwind components; @tailwind utilities; 在Vite项目中,我们一般以./src/index.css作为主css。当然,我们可以安装项目的不同,根据情况引入。