CODEWITHSUNDEEP
csstailwind-css
Chrea Chanchhunneng
Chrea Chanchhunneng

Reputation: 21

How to write many values of property css in tailwind?

I want to convert my css to tailwind but when I find many sources, there is no solution. Here is My css

.selector {
  background-size: contain, cover;
}

and If anyone have clue or solution for another property please feel free to comment the solution 🙏🏻

Upvotes: 0

Views: 1289

Answers (3)

Laaouatni Anas
Laaouatni Anas

Reputation: 3885

from the docs https://tailwindcss.com/docs/background-size

you can use multiple using bg-[] syntax

like this

<div class="bg-[length:contain,cover]"></div>

also, make sure you are in the NPM package tailwind.

and there isn't any space between the brackets.

length: is important for making the tailwind you are referring to size, because bg can be color, image, or any other thing.

enter image description here

Upvotes: 2

Ihar Aliakseyenka
Ihar Aliakseyenka

Reputation: 14313

You need to extend default background-sizes with your own. First argument is class name and second one is desired CSS property

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      backgroundSize: {
        'contain-cover': 'contain, cover', // here
      }
    },
  },
  plugins: [],
}

and use it like bg-contain-cover (you may name it as you wish and use like bg-your-custom-bg-size-name)

DEMO

Upvotes: 1

Gabe
Gabe

Reputation: 2676

You cannot use contain and cover at the same time in CSS that is why it is also not possible in tailwind. Choose one, either bg-contain or bg-cover. Here are examples of what it does: https://tailwindcss.com/docs/background-size

Upvotes: 1

Related Questions