[SOLVED] How can I convert CSS rules into Tailwind classes?

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:

There is no tailwind border-radius: 10px only rounded-lg or rounded-xl.
There is no padding: 10px 16px; only pre-defined padding values
No the same shadow
No color #E30513

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>