Style
Introduce
The css scheme of the reco theme is tailwindcss 3.0 + postcss-nested + postcss-each, 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');