Responsive page using Tailwind.

Community feedback

• 

  at33v•40

  @at33vPosted 10 months ago

  Hello, in your output.css file, there is no class for the background. Perhaps you forgot to run the CLI.

  You can add a background in various ways, here are a few of them:

  1. Tailwind class bg-[url('../images/bg-pattern-top-desktop.svg'),url('../images/bg-pattern-bottom-desktop.svg')]
  2. Tailwind config 'pattern-desktop': "url('../images/bg-pattern-top-desktop.svg'), url('../images/bg-pattern-bottom-desktop.svg')",
  3. Custom class

  @layer components {
    .my-custom-style {
      background-image: url('../images/bg-pattern-top-desktop.svg'), url('../images/bg-pattern-bottom-desktop.svg');
      background-repeat: no-repeat;
      background-position: left top, right bottom;
    }
  }
  

  Marked as helpful

  0

  ---

  

  P

  Flávia Reis•650

  @flaviare1sPosted 10 months ago

  Thank you, @at33v ! 😊

  If I want to do it through Tailwind Config, what should I type in the class?

  0

  

  at33v•40

  @at33vPosted 10 months ago

  @flaviare1s Something like this: bg-pattern-desktop bg-no-repeat bg-[position:left_top,_right_bottom]

  Marked as helpful

  0

  

  P

  Flávia Reis•650

  @flaviare1sPosted 10 months ago

  Thanks @at33v !

  0

  

  P

  Flávia Reis•650

  @flaviare1sPosted 10 months ago

  @at33v , the image does not appear. It's like she's blank. In the free design it also does not appear.

  0

  

  at33v•40

  @at33vPosted 10 months ago

  @flaviare1s You have an incorrect link to the images.

  • incorrect

  .bg-mob-top {
    background-image: url('./images/bg-pattern-top-mobile.svg');
  }
  

  • correct

  <img src="../images/icon-star.svg" alt="Star Icon">
  

  Marked as helpful

  0

  

  P

  Flávia Reis•650

  @flaviare1sPosted 10 months ago

  @at33v , I corrected the address, but the image still doesn't appear. When I open the file in the image editor it doesn't appear either.

  0

  

  at33v•40

  @at33vPosted 10 months ago

  @flaviare1s You don't need to make direct edits to output.css; this file is generated by the Tailwind CLI.

  Are you running the Tailwind CLI with a command like npx tailwindcss -i ./src/input.css -o ./src/output.css --watch?

  0

  

  P

  Flávia Reis•650

  @flaviare1sPosted 10 months ago

  @at33v , yeah, I am running this command. I think the problem is in the image file, as it doesn't appear.

  0

  

  at33v•40

  @at33vPosted 10 months ago

  @flaviare1s Image is present; you can verify this by going to your website, accessing the developer tools, and changing the image link for the element with the class md:bg-des-top.

  • current './images/bg-pattern-top-desktop.svg'
  • to '../images/bg-pattern-top-desktop.svg'

  It's not very visible, but it's there. image link

  Marked as helpful

  0

  

  P

  Flávia Reis•650

  @flaviare1sPosted 10 months ago

  @at33v , I'll try. Thanks! :)

  0

  

  P

  Flávia Reis•650

  @flaviare1sPosted 10 months ago

  @at33v I think it worked. Thank you very much!

  0
• 

  Bishal Singh Deo🎮•1,440

  @Bishalsnghd07Posted 10 months ago

  Hi, is your font family: spartan is working?

  1

  ---

  

  P

  Flávia Reis•650

  @flaviare1sPosted 10 months ago

  @Bishalsnghd07

  Hi!

  I think it is.

  0