This will retain the existingsans,seriformonoclasses and just updatessansto have your font at the top of the font stack. /* Generated by Tailwind CSS in your css file */.font-sans{font-family: nunito, -apple-system, BlinkMacSystemFont,"Segoe UI", Roboto,"Helvetica Neue", Arial,"Noto...
@font-face rules You can use the same approach to add your@font-facerules for any custom fonts you are using: @tailwindbase;@tailwindcomponents;@tailwindutilities;@layerbase{@font-face{font-family:Proxima Nova;font-weight:400;src:url(/fonts/proxima-nova/400-regular.woff)format("woff");}@...
This pattern only needs to be applied when the `cn` utility is required. For instances where there are no default Tailwind classes that need to be merged with user-provided classes, this pattern is not necessary. A good example of this is the `SelectValue.vue` component. ```vue <script...
Please keep this line to support my work :) --> <a href="https://github.com/manuelernestog/astro-modern-personal-website" target="_blank" class="font-bold">Website Template</a> developed by <a href="https://astro-modern-personal-website.netlify.app/" target="_blank" class="font-...
首先:如上所述,我们已经确定字体工具文件将保持不变。现在,我们可以在Tailwindcss配置文件中设置字体。 其次:下面是Tailwindcss配置文件的外观。 这里值得注意的变化是在extend对象中添加了fontFamily对象/设置,而该对象又包含在Tailwindcss配置文件的theme对象中。这就是我们需要做的全部工作。
: string; } const { chart, chartId, title, description } = Astro.props; --- <div class="chart-container w-full h-[400px] p-4 bg-white rounded-lg shadow-md"> {title && <h2 id={`${chartId}-title`} class="text-lg font-semibold mb-2">{title}</h2>} {description && <p ...
Many utilities in Tailwind share a common namespace but map to different CSS properties. For example text-lg and text-black both share the text- namespace, but one is for font-size and the other is for color. When using arbitrary values, Tailwind can generally handle this ambiguity automatic...
<html> <head> <title> Adding HTML entities using CSS content </title> <style> p::before { content: '\003C'; background-color: #04af2f; color: white; font-weight: bold; } p::after { content: '\003E'; background-color: #04af2f; color: white; font-weight: bold; } p { color...
{"@fontsource/lxgw-wenkai":"^5.1.0","@fortawesome/fontawesome-free":"^6.6.0","@material-design-icons/svg":"^0.14.13","material-icon-theme":"^5.11.1","overlayscrollbars":"^2.10.0","tailwind-nord":"^1.3.0"},"devDependencies": {"@types/node":"^22.7.5","@vitejs/plugin-vue"...
<p className="text-gray-900 font-medium">{message}</p> </div> )} </div> </div> <div className="text-center text-gray-500 text-sm"> Built with Vite, React, and Tailwind CSS </div> </div> </div> ) } export default App 3 changes: 3 additions & 0 deletions 3 cmd/templat...