Style

Introduce

The css scheme of the reco theme is tailwindcss 3.0open in new window + postcss-nestedopen in new window + postcss-eachopen in new window, you can directly write nested formats and loop formats (similar to scss) in css, which can be used directly regardless of custom styles or custom components.

Example

<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)';
   }
}

Notice

If you use the base, variables and components customized by the reco theme when writing tailwindcss, you need to import @vuepress-reco/tailwindcss-config/lib/client/tailwindcss-base.css at the top of the css file:

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