It’s because build.rollupOptions.external from vite:rollup setup looks for / before external files. So when you add css files to your html just add “https://stackoverflow.com/” (eg. /src/foo.css instead of src/foo.css)
Add your custom color values to theme > extend > colors section in tailwind.config.js //tailwind.config.js module.exports = { theme: { extend: { colors: { ‘custom-yellow’:’#BAA333′, } }, }, }
@Juan Marcos’ answer is correct but slightly deprecated. As of v2.1.0, Tailwind recommends in their docs to use the @layer directive for loading local fonts: @tailwind base; @tailwind components; @tailwind utilities; @layer base { @font-face { font-family: Proxima Nova; font-weight: 400; src: url(/fonts/proxima-nova/400-regular.woff) format(“woff”); } @font-face { font-family: Proxima Nova; font-weight: 500; src: url(/fonts/proxima-nova/500-medium.woff) format(“woff”); … Read more
There’s a discussion and related example over at the Next.js GitHub project. It sounds like that example achieves what you want to do. tl;dr: <div className=”h-64 w-96 relative”> // “relative” is required; adjust sizes to your liking <Image src={img.img} alt=”Picture of the author” layout=”fill” // required objectFit=”cover” // change to suit your needs className=”rounded-full” // … Read more
In tailwind 3.1, you can use arbitrary values to target child elements. <div class=”[&>*]:p-4″>…</div> <div class=”[&>p]:mt-0 “>…</div> https://tailwindcss.com/blog/tailwindcss-v3-1#arbitrary-values-but-for-variants
Now Tailwind supports CSS custom properties as arbitrary values since v3.0. :root { –text-color: red; –text-size: 5rem; } <script src=”https://cdn.tailwindcss.com”></script> <span class=”text-[color:var(–text-color)] text-[length:var(–text-size)] font-bold”> Hello world! </span>
If someone is still looking for this, here the solution using the rights tailwind classes. my layout look like this: <div> <header class=”sticky top-0 z-50″></header> <main class=relative></main> <footer></footer> </div>
with tailwind only, you can use the following classes absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 so, it would be like <div class=”relative”> <div class=”absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2″> </div> <div>
There is a tailwind class named .h-screen that translates to height:100vh; css. This should work as well. For further details please refer to the Official Tailwind documentation
EDIT: This doesn’t work for font-size anymore, and potentially more attributes moving forward How to change Chrome autocomplete styles on input: input { … font-family: $body-font; font-size: 1rem; font-weight: bold; color: #000; background-color: #fff; // Background color &:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px #fff inset; } // Font styles &:-webkit-autofill::first-line { font-family: $body-font; font-size: … Read more