Блог

Взгляните на мою текущую веб-страницу, разработанную с использованием страницы tailwindcss ниже:

Теперь я хочу добиться того, чтобы вместо этого пустого зеленого фона в центре был фон .PNG.

Я новичок в Tailwind, поэтому раньше я просто устанавливал a background: url(..) в css-файле для определенного класса div. Просматривая документацию TailwindCSS здесь о фоновом изображении,я не вижу там аналогичных функций.

Ниже приведен фрагмент моего кода для этого конкретного div:

 <!--        Content: background image url should be in this div, right?-->
    <div class="flex-1 pt-2 text-2xl font-bold mt-2 mb-2 bg-green-50 rounded-br-3xl">
        <div>
<!--Search field -->
            <div class="w-full">
                <form class="rounded">
                    <div class="px-5">
                        <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="username" type="text" placeholder="Ask me anything (Press CTRL K to focus)")>
                    </div>
                </form>
            </div>
            <!-- content -->   
            <div class="px-5 pt-8">Course content here</div>
        </div>
    </div>
 

Вы можете добавить свои собственные фоновые изображения, отредактировав раздел theme.BackgroundImage вашего tailwind.config.js файл:

// tailwind.config.js

   module.exports = {
    theme: {
      extend: {
        backgroundImage: theme => ({

         'hero-pattern': "url('/img/hero-pattern.svg')",

         'footer-texture': "url('/img/footer-texture.png')",
        })
      }
    }
  }
 

таким образом, шаблон героя станет, например, шаблоном героя bg.

Теперь, когда Tailwind 3 вышел, вы можете использовать одноразовые фоновые изображения, подобные этому, без необходимости использовать встроенные стили или расширять tailwind:

 <div class="bg-[url('/img/background.png')]">
  <!-- ... -->
</div>
 

Вы можете узнать больше об использовании произвольных значений в Tailwind 3 в документах.