Search code examples
tailwind-css

How to set a gradient background using bg-gradient

I cannot get this gradient to work. (I'm only using tailwindCSS, no JS library). I've used the code Snippet in CodePen and everything works fine. Here is the snippet:

<div class = "relative  bg-gradient-to-b from-gray-500 to-white overflow-hidden flex flex-col items-center -mt-1">
  <div class = "flex justify-center flex-col items-center xl:pb-24 pb-20 xl:pt-20 pt-12">
      <div class ="w-full flex flex-col items-center xl:mt-0">
          <div class ="xl:scale-100 scale-125">
              <img alt = "Graph" width="989" height="450" style = "color:transparent" src="/RaffleGraphTransparentwithAsterik.png">
          </div>
          <div class ="flex flex-col items-center px-6 xl:-mt-10 mt-8 xl:px-14 max-w-[600px] xl:max-w-[900px]">
              <h2 class = "xl:text-titleDesktop text-mobileTitle font-anton text-center px-10 xl:px-0">First Impressions Are Important</h2>
              <p class = "font-serif text-gray-800 xl:text-marketingDesktopBody text-mobileMarketingBody xl:text-center mt-6">
                  75% of users judge a business's credibility based on its website's design.*
              </p>
          </div>
      </div>
  </div>
</div>

Config file:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {
      backgroundImage: {
        'logo': "url('logo.svg')",
        
      },
      fontSize: {
        mobileMarketingBody : ['18px', {
          lineHeight: '32px',
          fontWeight: '300',
        }],
        mobileTitle : ['40px', {
          lineHeight: '36px',
          fontWight: '800' 
        }],
        titleDesktop : ['80px', {
          lineHeight: '80px',
          fontWeight: '800',
        }],
        marketingDesktopBody:  ['36px', {
          lineHeight: '64px',
          fontWeight: '300',
        }]
      },
      fontFamily: {
        anton: ['"Anton"']
    
        
      },
    },
  },
  plugins: [],
}

I've wrapped my extend object within the theme object, so I know it's not being overwritten. When inspecting the element in Chrome, nothing shows up:

I'm trying to achieve a gradient background from gray to white.

The output.css is not showing the updated code. Everything seems to have updated in the output.css automatically, except bg-gradient.

Solution

  • I did not run the npx tailwindcss -i ./src/input.css -o ./src/output.css --watch command when reopening my development environment.