csstailwind-csstailwind-3

How can I convert CSS rules into Tailwind classes?


I have the following styles in Figma:

button {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 10px 16px;

  position: absolute;
  width: 227px;
  height: 40px;

  /* Button/Red */

  background: #E30513;
  /* RedBtn */

  box-shadow: 0px 4px 12px rgba(157, 84, 81, 0.44);
  border-radius: 10px;
}
<button type="submit">
  Make request
</button>

I tried to rewrite these styles on tailwind for the button:

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

<button
  type="submit"
  class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-xl shadow-sm text-white bg-red-600 hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-offset-2"
>
  Make request
</button>

However, I have faced with problems:

Could you explain me, how to use TailwindCSS in my case?


Solution

  • Here is how you can do it directly from TailwindCSS classes using arbitrary values.

    <script src="https://cdn.tailwindcss.com"></script>
    
    <button 
      type="submit" 
      class="
        flex flex-row items-center py-[10px] px-[16px]
        absolute w-[227px] h-[40px] bg-[#E30513]
        shadow-[0px_4px_12px_rgba(157,84,81,0.44)]
        rounded-[10px] 
      "
    >
      Make request
    </button>