I can’t really figure out what’s going on. I have a Navbar component that I am importing to certain pages. I’ve super simplified it its just a styled div with a Link inside for now: /component/Navbar.js <div className="flex items-center justify-center filter drop-shadow-md bg-white h-20"> <Link className="text-xl font-semibold" href="/">LOGO</Link> </div> These classes are appearing in the… Read More Tailwindcss + Nextjs not working on components only

Iam using tailwind with Laravel , in HTML <h1 class="text-primary-700"> the text </h1> iam edited tailwind.config.js to be module.exports = { content: [ "./resources/**/*.blade.php", "./resources/**/*.js", "./resources/**/*.vue", ], theme: { extend: { colors: { primary: ‘#ccc’, }, }, }, plugins: [], } but the color did not change to #ccc . am i doing something wrong… Read More edit config of tailwind does not work as expected

I want to focus a div surrounding a button but only when keyboard focused. Usually focus-within works, but in this case it should only focus on keyboard focus (focus-visible:) and not when clicking with the mouse(focus:). Essentially, I need to combine focus-within and focus-visible. How can this be done? Tailwind Play: https://play.tailwindcss.com/ApDB5gSjqv <div class="flex h-screen… Read More Tailwindcss: How to focus-within and focus-visible at the same time

<div className="flex overflow-x-auto shadow-md sm:rounded-lg bg-white dark:bg-gray-800 dark:border-gray-700 w-11/12 justify-center"> <table className="w-full text-sm text-left text-gray-500 dark:text-gray-400"> <thead className="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400"> <tr> <th scope="col" className="px-6 py-3"> Date </th> <th scope="col" className="px-6 py-3"> Job Description </th> <th scope="col" className="px-6 py-3"> Location </th> <th scope="col" className="px-6 py-3"> Job Type / $ Rate (hourly) </th> <th… Read More How can I make <div> horizontally centered position using tailwindcss?

I am somewhat new to react and I am building a navigation menu where I target the ul and li components using the map() function with index to avoid duplicating code. Whenever I click to open one component all components open instead of an individual one. I know the issue is probably in me not… Read More React How to Individually Target li State

Using Tailwind, I have a div and two children that are flexbox. When the screen size gets small, the first child doesn’t shrink to give its sibling room. How do I fix this? When I add flex-shrink-0 to the second child it overflows. https://play.tailwindcss.com/UmXXkuJqk3?size=364×720 >Solution : You are facing this because of the input tag… Read More How to make flexbox sibling shrink to prevent text wrap

I’m trying to create a hover message within a span. For example, when we hover over the first span (parent span) its child span is shown. That’s working fine but the child span is not taking auto width. Here is the code I have tried <span class="group/item relative ml-2 h-6 w-6 bg-yellow-300"> Hover me <span… Read More Why span is not taking auto width in tailwind css?

I’m creating a grid with tailwind CSS but I’m stuck with resizing the grid division. Below is the code I have tried. <div class="grid grid-col-2 gap-1"> <span class="bg-green-500">Item 1 </span> <span class="bg-green-500">Item 2 </span> </div> This will result like this and that’s fine for me what I want is that the Item 1 col should… Read More How do we define width of Grid Column in Tailwind CSS?

I got a problem with a React component that takes as a prop scrollY: const Button = ({ scrollY, }) => { const [localScrollY, setLocalScrollY] = useState(0); useEffect(() => { setLocalScrollY(scrollY); }, [scrollY]); console.log(`mt-[${localScrollY}px]`); return ( <motion.button className={`top-3 mt-[${scrollY}px] ….`} > …… </motion.button>) I can see the mt class change in the console when scrolling… Read More Component does not reflect CSS style changes

I am building a site with Next.js and tailwind and wanted to know if there is any way you can use tailwind CSS classes along with Nextjs classes. For example: <img src={user.picture} className="rounded"{styles.pfp}></img> or perhaps something like <img src={user.picture} className=`rounded{styles.pfp}`></img> Is there any way to do that? Do let me know if there is. >Solution… Read More How to use css clases with tailwind css?