样式

reco_luan2022-08-06 21:44:36

介绍

reco 主题的 css 方案是 tailwindcss 3.0open in new window + postcss-nestedopen in new window + postcss-eachopen in new window ，可以直接在 css 中直接书写嵌套格式和循环格式（类 scss），无论自定义样式，还是自定义组件均可直接使用。

<div class="bg-indigo-500">reco_luan</div>

ul {
  @apply flex items-center list-none;
  li {
    @apply text-center text-base text-black;
  }
}

ul {
  diplay: flex;
  align-items: center;
  list-style: none;
  li {
    text-align: center;
    font-size: 16px;
    color: black;
  }
}

@each $lang in html, css, javascript, vue {
  div.language-$(lang)::before {
    content: '$(lang)';
  }
}

如果在写 tailwindcss 时，用到 reco 主题自定义的基础样式、变量和组件，需要在 css 文件最上面引入 @vuepress-reco/tailwindcss-config/lib/client/styles/tailwindcss-base.css ：

@import url('@vuepress-reco/tailwindcss-config/lib/client/styles/tailwindcss-base.css');