How to create striped background using tailwind?

Question

How do you translate:

  background: repeating-linear-gradient(
    to bottom,
    #039BE5 0px,
    #039BE5 20px,
    #90CAF9 20px,
    #90CAF9 40px
  );

to tailwind?

Answer 1

You could have a rule in your CSS:

<script src="https://cdn.tailwindcss.com/3.4.3"></script>

<style type="text/tailwindcss">
@layer utilities {
  .foo {
    background: repeating-linear-gradient(
      to bottom,
      #039BE5 0px,
      #039BE5 20px,
      #90CAF9 20px,
      #90CAF9 40px
    );
  }
}
</style>

<div class="h-80 foo"></div>

Or as a backgroundImage value:

tailwind.config = {
  theme: {
    extend: {
      backgroundImage: {
        foo: 'repeating-linear-gradient(to bottom, #039BE5 0px, #039BE5 20px, #90CAF9 20px, #90CAF9 40px)',
      },
    },
  },
};

<script src="https://cdn.tailwindcss.com/3.4.3"></script>

<div class="h-80 bg-foo"></div>

Or as an arbitrary backgroundImage class:

<script src="https://cdn.tailwindcss.com/3.4.3"></script>

<div class="h-80 bg-[repeating-linear-gradient(to_bottom,#039BE5_0px,#039BE5_20px,#90CAF9_20px,#90CAF9_40px)]"></div>

Or as a backgroundImage value using Tailwind's gradient color stops:

tailwind.config = {
  theme: {
    extend: {
      backgroundImage: {
        foo: 'repeating-linear-gradient(to bottom,var(--tw-gradient-stops))',
      },
    },
  },
};

<script src="https://cdn.tailwindcss.com/3.4.3"></script>

<div class="h-80 bg-foo from-[#039BE5] from-[length:0_20px] to-[#90CAF9] to-[length:20px_40px]"></div>

Or as a arbitrary backgroundImage class using Tailwind's gradient color stops:

<script src="https://cdn.tailwindcss.com/3.4.3"></script>

<div class="h-80 bg-[repeating-linear-gradient(to_bottom,var(--tw-gradient-stops))] from-[#039BE5] from-[length:0_20px] to-[#90CAF9] to-[length:20px_40px]"></div>

Or as a custom plugin:

tailwind.config = {
  plugins: [
    tailwind.plugin(({ addUtilities }) => {
      addUtilities({
        '.foo': {
          backgroundImage: 'repeating-linear-gradient(to bottom, #039BE5 0px, #039BE5 20px, #90CAF9 20px, #90CAF9 40px)',
        },
      });
    }),
  ],
}
  
    

<script src="https://cdn.tailwindcss.com/3.4.3"></script>

<div class="h-80 foo"></div>