tailwind-css Questions

Css – how can i set the image into a certain size box appear properly

May 31, 2023
Safal Thapa
2 Answers

I have written code like this :- import React from 'react' function OurCourse() { return ( <div className='w-full '> <div className='w-full h-[390px]' style={{ backgroundImage:'url(https://images.unsplash.com/photo-1532012197267-da84d127e765?ixlib=rb- 4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=387&q=80)', backgroundSize:'contain', backgroundRepeat:'no-repeat', }}> </div> </div> ) } export default OurCourse I want to set this…

VIEW QUESTION

How to set flexbox to fill remaining height & be in middle of screen?

May 30, 2023
Galbert
2 Answers

I'm trying to set the login container on the remaining height in the middle of the screen, it seems justify-content sets the content in the center, however, align-items: center doesn't work in this case, even if I set the container…

VIEW QUESTION

Reactjs – can I apply multiple classes to childrens at once in tailwind?

May 30, 2023
ok i
2 Answers

jsx code: <div className="[&>button]:text-white,px-6 flex gap-2"> <button>Right</button> <button>Left</button> <button>Circle</button> <button>Square</button> <button>Stop</button> </div> I was wondering if there was a way in tailwind that would allow me to use multiple classes on all the buttons at once in oneline in react?…

VIEW QUESTION

“Can’t get Javascript & TailwindCSS applied in webpack config?”

May 29, 2023
infodev
2 Answers

In developping an outlook add-in. I would add tailwind to it, here's the tuto that I'm following In package.json I get these scripts "scripts": { "build": "webpack --mode production", "build:dev": "webpack --mode development", "dev-server": "webpack serve --mode development", ... },…

VIEW QUESTION

Css – How can I round the border of my table body?

Here is my problem: I need my table to have a) a border around only the table body and b) this border needs to be rounded. Their border is there, but I cannot seem to get it rounded - can…

VIEW QUESTION

Html – Two flex items at 50% width with oveflow-x: scroll won't shrink

May 23, 2023
vrepsys
3 Answers

I want a flex container to have 2 flex items (item A, and item B) with equal widths of 50% of the parent container. Item B may contain very long strings without wrapping, and it should be scrollable along the…

VIEW QUESTION

Html – bring image besides headline on the left & right side in tailwind css without using flexbox?

May 23, 2023
deadcoder0904
2 Answers

I want to bring the image next to my headline. It shouldn't take up headline space but should be beside it. Either the left side or the right side. specifically, the square image should be where I have shown the…

VIEW QUESTION

Html – Why my input not showing correctly the icon and the text?

May 23, 2023
Gegob
2 Answers

Im doing a blazor component that is needs to be formed with an icon(im using from awesome-icons) and text. The representation of the input is as follows: it consists of an icon and a text that should go to the…

VIEW QUESTION

Reactjs – Headless UI Tailwind Menu display issue

May 21, 2023
Siddharta Maity
2 Answers

I am using Tailwind with Headless UI for my react project. I am having a display issue for Headless UI Menu as shown i the below images - Correct display - Problematic display - The menu is open but not…

VIEW QUESTION

Html – Vertical spacing between p tags needs to be the same as vertical spacing between p and a tags

May 21, 2023
Tyler Hilbert
2 Answers

The vertical spacing between 2 'p' tags is not the same as the vertical spacing between a 'p' tag and an 'a' tag. How do I update Tailwind CSS so the vertical distance between Tyler Hilbert and Computer Engineering is…

VIEW QUESTION