創建vite項目或者vue-cli配置大同小異
1、當前環境
- Vue.js 3.5
- @nuxtjs/tailwindcss 6.13.1
- nuxt3.15.4
- node18
這里主要依賴是tailwindcss 因為當前項目是使用nuxt開發。
2、配置顏色模式
在assets/css下創建main.css
* {padding: 0;margin: 0;box-sizing: border-box;
}[data-theme="light"] {/* 基礎顏色 */--background-color: #FFFFFF;/* 次要背景顏色 */--background-secondary-color: #F5F5F5;--text-color: #333333; /* 主要文字顏色 */--text-secondary-color: #666666; /* 次要文字顏色 */--primary-color: #1E90FF; /* 主色調 */--secondary-color: #FF6347; /* 輔助色調 */--border-color: #E0E0E0; /* 邊框顏色 *//* 狀態顏色 */--success-color: #4CAF50; /* 成功 */--error-color: #F44336; /* 失敗 */--warning-color: #FF9800; /* 警告 */--info-color: #2196F3; /* 信息 *//* 其他輔助顏色 */--disabled-color: #CCCCCC; /* 禁用狀態顏色 */--placeholder-color: #999999; /* 輸入框占位符顏色 */--icon-color: #666666; /* 圖標顏色 */
}
[data-theme="dark"] {/* 基礎顏色 */--background-color: #1E1E1E;/* 次要背景顏色 */--background-secondary-color: #282828;--text-color: #E0E0E0; /* 主要文字顏色 */--text-secondary-color: #A0A0A0; /* 次要文字顏色 */--primary-color: #1E90FF; /* 主色調 */--secondary-color: #FF6347; /* 輔助色調 */--border-color: #444444; /* 邊框顏色 *//* 狀態顏色 */--success-color: #66BB6A; /* 成功 */--error-color: #EF5350; /* 失敗 */--warning-color: #FFA726; /* 警告 */--info-color: #42A5F5; /* 信息 *//* 其他輔助顏色 */--disabled-color: #666666; /* 禁用狀態顏色 */--placeholder-color: #888888; /* 輸入框占位符顏色 */--icon-color: #A0A0A0; /* 圖標顏色 */
}/* 覆蓋 vant 組件的默認樣式 */
:root:root {--van-cell-background: var(--background-color);
}
.theme-transition {& * {transition:background-color 0.2s ease,color 0.2s ease,border-color 0.2s ease;}/* 禁用偽元素過渡 */& *::before,& *::after {transition: none;}
}/* 全局樣式文件或組件內樣式 */
.markdown-content ul {list-style-type: disc; /* 恢復小圓點 */padding-left: 1.5em; /* 添加合理縮進 */
}.markdown-content li {margin: 4px 0;
}
3、在app.vue引入
<template><NuxtPage />
</template>
<style>
@import url("~/assets/css/main.css");
</style>
<style>
/* 平滑的滾動效果 */
html {scroll-behavior: smooth;
}</style>
4、配置自定義類名
修改配置文件tailwind.config 創建項目安裝Tailwind CSS 自動生成的
module.exports = {// 配置自定義樣式theme: {extend: {colors: {background: "var(--background-color)",text: "var(--text-color)","text-secondary": "var(--text-secondary-color)",primary: "var(--primary-color)","text-primary": "var(--primary-color)",secondary: "var(--secondary-color)",border: "var(--border-color)",success: "var(--success-color)","text-success": "var(--success-color)",error: "var(--error-color)",warning: "var(--warning-color)","text-warning": "var(--warning-color)",info: "var(--info-color)","text-info": "var(--info-color)",disabled: "var(--disabled-color)",placeholder: "var(--placeholder-color)",icon: "var(--icon-color)","background-secondary-color": "var(--background-secondary-color)"},},},
};
5、頁面使用
<header class=" text-text py-20 text-center"><h1 class="text-4xl font-bold">歡迎來到我的博客</h1><p class="mt-4 text-lg">分享技術、生活和思考</p>
</header>
這里主要觀察 text-text 樣式 這里 類名結構為 text表示字體 text-[自定義類名]
因為配置的樣式為text。他的值為css變量
6、切換顏色主題
[data-theme=“light”]和 [data-theme=“dark”] 下分別定義了兩套css變量
所以現在如果需要切換顏色主題 只需要修改 根節點data-theme的值。
7、效果圖
深色
淺色
怎么樣 是不是 很簡單 我相信你也可以的。
)
