我正試圖重新創建一個從香草CSS到tailwindcss的項目。但我嘗試了很多選項，都失敗得很慘。

這是CSS代碼:

header {
    background: linear-gradient(rgba(135, 80, 156, 0.9), rgba(135, 80, 156, 0.9)), url(img/hero-bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
    position: relative;
}

有人能把這段代碼轉換成等價的tailwindcss代碼嗎？

你有幾個選擇:

最簡單的方法是在樣式屬性上設置圖像，畢竟這是非常定制的樣式:

<header
  class="relative bg-fixed bg-center bg-cover bg-no-repeat"
  style="background-image:linear-gradient(rgba(135, 80, 156, 0.9), rgba(135, 80, 156, 0.9)), url(img/hero-bg.jpg)">
  
</header>

第二種選擇是繼續使用您的樣式表，但只用于背景圖片:

header {
  background-image:linear-gradient(rgba(135, 80, 156, 0.9), rgba(135, 80, 156, 0.9)), url(img/hero-bg.jpg)
}



<header class="relative bg-fixed bg-center bg-cover bg-no-repeat">
  
</header>

最后，你可以創建一個插件，你可以動態地發送顏色，圖片作為一個參數，tailwind會為你生成這些類。這比較復雜，但是文檔非常有用:https://tailwindcss.com/docs/plugins#app

如果你問我，我會選擇第一個選項

這里有一個工作演示和教程:https://bleext . com/post/creating-a-hero-header-with-fixed-image

我在https://transform.tools/css-to-tailwind發現了一個很棒的工具，可以將普通CSS轉換成Tailwindcss CSS實用程序類

`/*
  Based on TailwindCSS recommendations,
  consider using classes instead of the `@apply` directive
  @see https://tailwindcss.com/docs/reusing-styles#avoiding-premature-abstraction
*/
header {
  @apply bg-no-repeat bg-cover bg-[center_center] bg-fixed relative;
  background: linear-gradient(rgba(135, 80, 156, 0.9), rgba(135, 80, 156, 0.9)),
    url(img/hero-bg.jpg);
}