非你网

安装和使用 tailwindcss

https://blog.vini123.com/958

按照上边的链接的步骤，就可以安装好 tailwindcss 了。

只是在导入 scss 的时候，这里依旧写在 vite.config.ts 的配重中。

  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `
          @use "@/assets/styles/element.scss";
          @use "@/assets/styles/element-dark.scss";
          @use "@/assets/styles/main.scss";
        `,
      },
    },
  },

并在 package.json 中增加配置。遵循使用 es 模块规范。

{
  …,
  "type": "module"
}

运行起来，发现 tailwindcss 的默认样式已经生效了。

再完善 homeveiw，使用上 tailwindcss 看看。仅修改以下代码。

  <div class="container mx-auto">
    <h1 class="mt-4">Custom theme example (on demand)</h1>

发现，整个大的容器 div 已经水平居中了。 有了 tailwindcss，就可以单独少写很多 css。直接在 div 中就可以实现样式的效果。而作为后台，又使用 element-plus，需要使用到定制化的样式已经比较少了。 tailwindcss 就刚好使用了一点点就能达到想要的效果。

可是，再仔细看页面，发现按钮的文字看不见了，其他样式也有缺陷。检查发现是 tailwindcss 的样式对 element-plus 的样式有影响。

解决 tailwindcss 和 element-plus 样式的影响问题

先修改 tailwind.config.js 文件，加入以下配置。

export default {
  corePlugins: {
    preflight: false,
  },
  …

再去下载 preflight.css 文件，下载地址 [https://unpkg.com/browse/tailwindcss@3.3.3/src/css/preflight.css]() 注意，和自己安装版本的对应。

还是一样，改名为 prefight.scss 后，配置引入它。并注释掉有冲突的样式。这里把对按钮这块的处理样式给注释掉了。

// button,
// [type='button'],
// [type='reset'],
// [type='submit'] {
//   -webkit-appearance: button; /* 1 */
//   background-color: transparent; /* 2 */
//   background-image: none; /* 2 */
// }

然后发现，按钮的样式回来了。

提交版本

git add .
git commit -m '安装和配置 tailwindcss'

前边一篇说了 element-plus 覆盖主题色的操作。这边就要做多主题的处理。也就是除了默认的主题，还得增加一个暗黑主题。

https://element-plus.org/zh-CN/guide/dark-mode.html

Do

思路还是一样，覆盖主题（颜色，间距等）。

# 创建
touch assets/styles/element-dark.scss

@forward 'element-plus/theme-chalk/src/dark/var.scss' with (
  $bg-color: (
    'page': #0a0a0a,
    '': #626aef,
    'overlay': #1d1e1f,
  ),
  $colors:(
    "primary": ("base": green),
  )
);

@use "element-plus/theme-chalk/src/dark/css-vars.scss" as *;

在 vite.config.ts 中引入。

    preprocessorOptions: {
      scss: {
        additionalData: `
          @use "@/assets/styles/element.scss";
          @use "@/assets/styles/element-dark.scss";
        `,
      },
    },

这样，样式就好了。可以手动在 html 节点加入 class="dark" 看看效果。发现背景颜色已经是黑色（#0a0a0a）了。

继续阅读

多主题，是一个站点的常规配置。至少白天主题和夜晚主题是必须要有的。 element-plus 提供了一个很好的实现多主题的方案。先从修改默认主题色开始。

https://element-plus.org/zh-CN/guide/theming.html

开始

先安装 sass

pnpm add -D sass

再创建覆盖默认主题颜色的 sass 文件

# 创建
touch assets/styles/element.scss

# 填充以下内容
@forward 'element-plus/theme-chalk/src/common/var.scss' with (
  $colors: (
    'primary': (
      'base': #003261,
    ),
    'success': (
      'base': #21ba45,
    ),
    'warning': (
      'base': #f2711c,
    ),
    'danger': (
      'base': #db2828,
    ),
    'error': (
      'base': #db2828,
    ),
    'info': (
      'base': #42b8dd,
    ),
  ),
  $button-padding-horizontal: (
    'default': 80px,
  )
);

继续阅读