Add this to your tailwind.config.js file variants: { extend: { display: [“group-hover”], }, }, And then add group to your parent div and hidden and group-hover:block to your child element that you want to appear on hover of the parent. <div class=”group”> <button class=”hidden group-hover:block”>Child</button> </div>
If you would look at the console you would see a warning. Warning: validateDOMNesting(…): <head> cannot appear as a child of <div> So, to fix this you just have to move head out of the div and move it to a different higher component.
Solution for both .css and .scss At the root level of your project, update or create a directory, .vscode, with a file, settings.json: Add the following to file .vscode/settings.json: { “css.validate”: false, “less.validate”: false, “scss.validate”: false } Install the vscode-stylelint extension Install stylelint-config-standard: npm i stylelint-config-standard -D Create a stylelint.config.js file at the root level … Read more
Tailwind CSS doesn’t provide a built-in way to customise the scrollbar styling. However, you can use the various ::-webkit-scrollbar pseudo-elements to style it. Tailwind playground link: https://play.tailwindcss.com/5samiwyr4v. @layer utilities { .scrollbar::-webkit-scrollbar { width: 20px; height: 20px; } .scrollbar::-webkit-scrollbar-track { border-radius: 100vh; background: #f7f4ed; } .scrollbar::-webkit-scrollbar-thumb { background: #e0cbcb; border-radius: 100vh; border: 3px solid #f6f7ed; } … Read more
From Next.js 13, the next/image component allows styling the underlying image directly using style/className. This means you can apply width: 100% and height: auto on the Image component directly. import Image from ‘next/image’; <Image src={img1} width=”0″ height=”0″ sizes=”100vw” style={{ width: ‘100%’, height: ‘auto’ }} /> Or, if using Tailwind CSS. import Image from ‘next/image’; <Image … Read more
The mx-auto should also go to the image, tailwind make the image a block element: <link href=”https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.4.6/tailwind.min.css” rel=”stylesheet” /> <section class=”hero container max-w-screen-lg mx-auto pb-10″> <img class=”mx-auto” src=”https://picsum.photos/id/1/200/300″ alt=”screenshot” > </section> And with flexbox it should be justify-center <link href=”https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.4.6/tailwind.min.css” rel=”stylesheet” /> <section class=”hero container max-w-screen-lg mx-auto pb-10 flex justify-center”> <img src=”https://picsum.photos/id/1/200/300″ alt=”screenshot” > </section> … Read more
For me it worked to override ‘sans’, because that’s whats being used by default. module.exports = { theme: { fontFamily: { sans: [‘”PT Sans”‘, ‘sans-serif’] } }, } (Note that theme.fontFamily is overriding the 3 defaults, so if you copy paste the above code you lose font-serif and font-mono) But it would be weird to … Read more
I ended up solving this in the dumbest way possible, on a global css file: html { @apply text-gray-800 } Not pretty but at least I can use the tailwind classes
Tailwind’s Preflight functionality will remove all of the browsers’ default stylings for most elements, giving you a clean basis to start from, to make cross-browser styling more consistent. You need to re-add the styles you wish, for example: className=”underline text-blue-600 hover:text-blue-800 visited:text-purple-600″ or: a { @apply underline text-blue-600 hover:text-blue-800 visited:text-purple-600 }
As suggested by Ihar Aliakseyenka, the “safelist” section is exactly what I was looking for. Thanks Ihar! module.exports = { content: [ ‘./pages/**/*.{html,js}’ ‘./components/**/*.{html,js}’, ], safelist: [ ‘bg-red-500’, ‘text-3xl’, ‘lg:text-4xl’, ] // … }