Skip to content
Submitted 2 months ago

Advice Generator App using Vanilla JavaScript and Tailwind CSS

abdullahmd2•90
@abdullahmd2
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Advice generator app
  • HTML
  • CSS
  • JS
  • API
2junior

Design comparison

SolutionDesign

Solution retrospective

What specific areas of your project would you like help with?

Facing some issue when adding the Tailwind CSS breakpoint classes (sm, md, lg, etc.) for making responsive layout. I don't know why the classes are not working and was not able to make a responsive layout. But when I used plain CSS media queries for responsive layout it was working fine (you can find the media queries in output.css file in my code, it is commented for now).

If you can help please provide a solution. I have added a comment in the code. I am using Tailwind CLI. Also I was unable to horizontally center the Divider Pattern SVG, need help in that also.

Community feedback

  • markus•2,250
    @markuslewinPosted 2 months ago

    Hi!

    The setup looks good to me. Did you run the Tailwind command and commit the output file after you updated the HTML? output.css seems to be out of sync with index.html in the GitHub repo.

    I ran npx tailwindcss -i ./styles.css -o ./output.css --watch and everything just worked; mx-auto centered the image, and the breakpoints in the comment worked aswell!

    0
    abdullahmd2•90
    @abdullahmd2Posted 2 months ago

    Hi @markuslewin

    Thanks for your comment! You are right, I don't know why output.css was out of sync with index.html. I corrected it and pushed the updated code.

    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord