I’m working on a React project where I have multiple components that render conditionally based on state changes. I want to implement a slide-down and fade-in effect for one of these components when it gets rendered. Below is a simplified version of my code:

Compiled with problems:
×
ERROR in ./src/global.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/source-map-loader/dist/cjs.js!./src/global.css) 5:36-89
Module not found: Error: Can’t resolve ‘/images/Rectangle_img.jpg’ in ‘D:React-Coursedental_care_landing_pagesrc’

section is a flex container with two div child. Both the divs are also flex container with img being it’s children. Every div has 3 images. image of div1 is overlapped by the image of div2.

the style changes(button with number) only visually when I scale the page (zoom in, zoom out) . But I don’t have any @media
enter image description here

While learning React, Next.js and Tailwind, I have encountered some weird behavior. I can only use some of the fixed sizes provided according to the docs (https://tailwindcss.com/docs/size). In the code below, size-30 is not working, nor is size-50. However, size-20, size-40 and size-60 are working.

So I have a component that does something like this:

I’m currently facing this problem whenever I want to build my application.
Failed to compile.
static/css/main.8da26278.css from CSS Minimizer plugin
cssmain.8da26278.css:1356:42: Unknown word [webpack://./src/index.css:3,0][static/css/main.8da26278.css:1356,42]

I am coding a button class with tailwind in react which manages 3 colors of buttons (white, blue-navy and gray). A secondaryColor() function manages the color of the text inside the button. This function actually return the opposite color of the button. In the tailwind code, there is a ternary condition which handles the hover attribute of the button.

I made this grid system with 12 columns, the detail is that I want to modify it in a way that I don’t know if it is possible. The modification consists of adding two more columns, one at the beginning and one at the end, those two columns would be 1fr. I did that part, but what I would like to do is that between column 1 (1fr) and 2 (84px) there is no gap and the same case between column 13 (84px) and 14 (1fr). I attach the code that I have so far.

I need to make animation of slides and content with progress bar on react like here http://warsawrising.eu/, i.e. you have a full screen block with picture on background and text -> spin the wheel down -> text and picture on background disappear with animation and new picture on background and text with animation appears and progress bar fills up. Maybe it’s not the slides, maybe it’s just the way I put it. Been racking my brain for a few weeks now and can’t find a solution. Maybe someone can give me some ideas and tell me how to do it.