play.tailwindcss.com | This is a Next | Frontend Framework library

I have a flexbox which consists of one input box and two circular divs. I want the input field to take up all the space that the circle divs don't need, hence I assigned it a w-full.

However, the input field takes up more space than it should and in effect causes the divs to be squished and not correct circles.

Image:

Code:

I have the following HTML structure:

https://play.tailwindcss.com/se2rJ5Y3wt?file=css

Consider the following button:

Take a look at the snippet below. Having .filepicker as a direct descendant of body works as expected when shrinking window size. Here's Tailwind Play snippet.

I have installed Tailwind CSS using npm, i am using "tailwindcss": "^2.2.15" version. when i am trying to apply list style type on my paragraph it's not working, it doesn't show any style type with content.

Here is my code which is running fine on play.tailwindcss.com CODE

But when i write exact same code in my local code editor it doesn't work as intended.

Screenshot of exact same code when i run it locally.

Based on the documentation, Tailwind JIT (Just In Time) mode allows to add arbitrary styles.

I can't make it work for the CSS grid's grid-template-areas property. In this simple example, I just want the sider on the left, the main content on the right.

Note that I have more complex goals, I know I don't need CSS Grid for such a simple layout.

• JIT mode works as using an arbitrary padding such as px-[23px] works.
• The issue lies here: [grid-template-areas:'sider content'], as if you go to the CSS tab there is the same property that works if uncommented.

Here's a playground:

I am making a code container for my website. It is working fine when the text does not need wrap. But I need to add a x-scrollbar if width is less than line width but my line is breaking to next line.

tailwind play url

Note: Resize the result container to see, any help is appreciated. Tried: overflow-x-scroll and break-normal

Using tailwind. I'd like item 1, item 2 to start from left of screen item 3 to start from right of screen. I'm seemingly lost trying to self-answer the following questions:

1. does flex class need to be explicitly specified in child components? Shouldn't, but flex-row doesn't work without flex added in.
2. why isn't item 3 moved to the right? If all inner divs are removed and justify done on parent it works as expected.

Playground: https://play.tailwindcss.com/AwJKkx66oW

Snippet:

i have main grid with 2 columns. grid take 1 fr height. In right column i want create scrolled div with take all height.

We all know that flex dont overflow need apply min-height/min-width: 0;

But i 2 hour try apply all combination for stop height overflow. And what did i find ? min-height dont give nothing in my example. But i miss click and write rule height:0 and overflow stopped! what is magic ? I didnt find nothing in google about it undocumented property!