样式

介绍

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

示例

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/tailwindcss-base.css

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