首页 > 其他分享 >使用 CSS variables 和Tailwind css实现主题换肤

使用 CSS variables 和Tailwind css实现主题换肤

时间:2022-10-07 18:34:19浏览次数:59  
标签:换肤 Tailwind text variables theme color colors base --

背景

在2B的项目中,常常有客户(甲方爸爸)需求,定制与他们企业相同的主题的网站;随着苹果暗黑模式的推出,换肤的需求在网站开发中越来越多,也越来越重要,最近在网上看到 Tailwind Labs的实现的换肤视频,决定实践一把。

实现博客列表

我们先使用Tailwind css 实现一个博客列表

  • 效果

使用 CSS variables 和Tailwind css实现主题换肤_html

  • html 代码
<div class="min-h-screen bg-white">
<ul class="p-10 space-y-10">
<li>
<a class="text-gray-600">
<article class="relative flex items-center transition-transform transform group hover:-translate-x-2">
<div class="flex flex-col flex-grow py-8 space-y-4 text-base rounded px-8 shadow-md bg-gray-50">
<div class="flex flex-row justify-between">
<h3 class="text-xl text-gray-900 font-bold">useEffect 完整指南</h3>
<span>2020-06-08</span>
</div>
<p className="leading-8">你用Hooks写了一些组件,甚或写了一个小型应用。你可能很满意,使用它的API很舒服并且在这个过程中获得了一些小技巧。</p>
</div>
</article>
</a>
</li>
<li>
<a class="text-gray-600">
<article class="relative flex items-center transition-transform transform group hover:-translate-x-2">
<div class="flex flex-col flex-grow py-8 space-y-4 text-base rounded px-8 shadow-md bg-gray-50">
<div class="flex flex-row justify-between">
<h3 class="text-xl text-gray-900 font-bold">使用 CSS variables 和Tailwind csss实现主题换肤</h3>
<span>2020-06-08</span>
</div>
<p className="leading-8">根据Tailwind Labs的[换肤视频],手动实践。</p>
</div>
</article>
</a>
</li>
</ul>
</div>

CSS variables

使用CSS variables 是实现换肤最方便的方案,按传统的方案就得加入一些css class 就可以实现,如:

:root {
--page-bg:#fff;
--card-bg:#F9FAFB; /* gray-50 */
--title-color:#111827;/* gray-900 */
--desc-color:#4B5563; /* gray-600 */
}

.theme-dark {
--page-bg:#111827; /* gray-900 */
--card-bg:#1F2937; /* gray-800 */
--title-color:#F3F4F6;/* gray-100 */
--desc-color:#E5E7EB; /* gray-200 */
}
.page__bg{
background-color: var(--page-bg);
}
.post__card{
background-color: var(--card-bg);
}
.post__title{
color: var(--title-color);
}
.post__desc{
color: var(--desc-color) ;
}

使用 CSS variables 和Tailwind css实现主题换肤_字体颜色_02

这样就可以实现深色皮肤了,如果想增加一套皮肤,只需增加一套颜色变量就可以了。

兼容性

CSS variables 只支持现代浏览器,但是许多客户还在使用IE11,为了兼容IE11 可以使用 postcss 插件postcss-custom-properties

例如下面css:

:root {
--color: red;
}
h1 {
color: var(--color);
}

经过postcss 的处理,得到下面的css,不支持的css属性, 浏览器会自动忽略。

h1 {
color: red;
color: var(--color);
}

但是这个插件只对第一次编译的时候有用,动态换肤的时候就失效了, 我们可以使用js polyfill 来修复这个问题,在HTML中引入下面代码就可以解决。

<script>window.MSInputMethodContext && document.documentMode && document.write('<script src="https://cdn.jsdelivr.net/gh/nuxodin/[email protected]/ie11CustomProperties.min.js"><\/script>');</script>

标签:换肤,Tailwind,text,variables,theme,color,colors,base,--
From: https://blog.51cto.com/u_15757429/5734850

相关文章

  • 使用 NextJS 和 TailwindCSS 重构我的博客
    git地址在线地址这是笔者第三次重构博客,虽然博客应用是最简单的应用,但学习新技术何不从重构博客开始?第一版:使用Hexo和Githubpages优点:重新部署只要花5分钟,内容管理在本......
  • TailwindCSS 资源推荐
    前言TailwindCSS发布了3.0,功能也越来越好用,那么是否有与之相关的组件库呢?每个项目都有awesome,TailwindCSS也有awesome-tailwindcss,你可以在这里找到插件、工具、......
  • Vue3集成Tailwind CSS
    TailwindCSS是一个由js编写的CSS 框架 他是基于postCss去解析的对于PostCSS的插件使用,我们再使用的过程中一般都需要如下步骤:PostCSS配置文件postcss.config.js,新......
  • tailwindcss 设置图片位置
    链接https://tailwindcss.com/docs/object-position图示......
  • 如何设置您的第一个 Tailwind CSS 项目
    如何设置您的第一个TailwindCSS项目与任何其他CSS框架不同,TailwindCSS没有固执己见,它允许您为任何项目创建组件和设计元素。它不是唯一实用程序优先的CSS框架,但......
  • Stylify:实用程序优先的 CSS 库来替换 Tailwind
    Stylify:实用程序优先的CSS库来替换Tailwindhttps://stylifycss.com/为什么创建Stylify的作者会引起你的共鸣一个项目使用Bootstrap,第二个项目使用Tailwind和......
  • 10 个 Tailwind CSS 电子商务模板,免费和付费
    10个TailwindCSS电子商务模板,免费和付费自由的舒兹演示|在这里获取重要信息使用Vue3+Vuex构建使用Strapi作为后端无花果设计提供线框描述使用V......
  • [Go] Variables - non-declaration statement
    packagemainimport( "fmt")funcmain(){varfirstNamestring="firstName"varlastName="lastName"varfullNamestring//Gowillassignd......
  • 为 html 设置 Tailwindcss CLI
    为html设置TailwindcssCLI以下是我用来创建基本Tailwaind设置的步骤:在VSCode中打开一个新终端并导航到您要在计算机上创建项目的任何位置(这里是终端命令的一个......
  • 如何安装 Tailwind CSS 解释!
    如何安装TailwindCSS解释!这篇文章是关于如何使用TailwindCLI安装TailwindCSS的初学者指南。您可以通过多种方式安装TailwindCSS,这完全取决于您正在从事的项目......