实现方式

新建Blazor项目，然后引用nuget包BamButz.MSBuild.TailwindCSS。

编辑项目文件，加入TailwindCSS生成操作：

<ItemGroup><TailwindCSS Include="wwwroot/css/app.css" />
</ItemGroup>

然后和上次的一样，修改wwwroot文件夹中的app.css文件内容，指定导入哪些Tailwind库：

@tailwind base;
@tailwind components;
@tailwind utilities;#blazor-error-ui {background: lightyellow;bottom: 0;box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);display: none;left: 0;padding: 0.6rem 1.25rem 0.7rem 1.25rem;position: fixed;width: 100%;z-index: 1000;
}#blazor-error-ui .dismiss {cursor: pointer;position: absolute;right: 0.75rem;top: 0.5rem;
}

最后，直接编译，你会发现app.min.css已经自动生成了，和原来的实现效果一样。

同样，你也可以在项目的根目录下，创建tailwind.config.js文件定制app.min.css输出内容：

module.exports = {purge: [],darkMode: false, // or 'media' or 'class'theme: {extend: {},},variants: {extend: {},},plugins: [],
}

具体配置格式，可以参考官方文档：https://tailwindcss.com/docs/configuration

结论

如果你觉得这篇文章对你有所启发，请关注我的个人公众号”My IO“，记住我！

Hello Blazor：(2)集成Tailwind CSS续——nuget包方式相关推荐

Hello Blazor：(2)集成Tailwind CSS
Blazor默认集成了bootstrap,对于我这种后端出身,对CSS一知半解的.NET开发人员来说,使用起来还是有一定难度的. 好不容易才学到点皮毛,结果前端人员居然告诉我,bootstrap已经过 ...
学习Vue3 第三十四章（Vue3集成Tailwind CSS）
Tailwind CSS 是一个由js编写的CSS 框架他是基于postCss 去解析的官网地址Tailwind CSS 中文文档 - 无需离开您的HTML,即可快速建立现代网站. 对于PostC ...
Tailwind CSS
Tailwind CSS Tailwind CSS是一个实用程序优先的 CSS 框架,用于快速构建自定义用户界面. Useful Links 传奇:官方资源 Website - 官方 Tailwind ...
tailwind css_如何使用Tailwind CSS构建样式化的登陆页面
tailwind css 介绍 (Introduction) Developers use Cascading Style Sheets (CSS) to style websites. But of ...
发布nuget包的正确姿势---cicd自动打包发布
最轻便的发布nuget包方式,方便cicd自动打包发布nuget包首先新建项目项目名随便取,这里就叫它GuiH.ClassLibrary 默认即可,需要改目标版本时,等创建好再改项目创建好了随 ...
Tailwind CSS 浅析
TailwindCSS 是一个CSS框架,和你知道的bootstrap,element ui,Antd,bulma.一样.将一些css样式封装好,用来加速我们开发的一个工具. 和其他的CSS框架有什么 ...
Tailwind CSS 入门和实践
作者:康曾璐背景 Tailwind 是一个基于 Atomic/Utility-First 规范 CSS 框架,提供了基础的工具类 utility classes(如:内边距 padding.字体 t ...
使用React和Tailwind CSS搭建项目模板
公众号关注 "太空编程" 设为 "星标",带你了解硬核的编程知识! 众所周知,Tailwind CSS框架越来越流行,所以我决定尝试学习并使用Tailwind ...
使用React和Tailwind CSS搭建项目框架
众所周知,Tailwind CSS框架越来越流行,所以我决定尝试学习并使用Tailwind CSS来搭建一个项目模板,一方面自己深入学习下,二来帮助新人更快地上手Tailwind CSS开发. 创建一 ...

Hello Blazor：(2)集成Tailwind CSS续——nuget包方式

实现方式

结论

Hello Blazor：(2)集成Tailwind CSS续——nuget包方式相关推荐

最新文章

热门文章