CODEWITHSUNDEEP
csstailwind-csstailwind-3
user15444752
user15444752

Reputation:

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?

Upvotes: 1

Views: 2423

Answers (3)

rozsazoltan
rozsazoltan

Reputation: 8858

Specifically, in a CSS file, you can assign Tailwind classes to each other using the @apply directive.

button {
  @apply flex flex-row items-center absolute w-[227px] h-10 shadow-[0px_4px_12px_rgba(157,84,81,0.44)] px-4 py-2.5 rounded-[10px];
  background: #e30513;
}

You can also look for a transformation tool. I'd like to highlight just one, simply because it's open-source:

Many types of converters have been created within a large project. In my opinion, they can effectively speed up this kind of work. However, it might still be worth creating custom template settings and simplifying the code.

example transform result

Upvotes: 0

Nicolas Hedger
Nicolas Hedger

Reputation: 166

There are basically two ways to solve this problem.

Tailwind CSS v3 actually supports setting arbitrary values.

  • border-radius: 10px can be represented as rounded-[10px]
  • padding: 10px 16px can be represented as py-[10px] px-[16px]
  • box-shadow: 0px 4px 12px rgba(157, 84, 81, 0.44) can be represented as shadow-[0px_4px_12px_rgba(157,84,81,0.44)]
  • background: #E30513 can be represented as bg-[#E30513]

Here's an example of your button: TailwindCSS Playground

Alternatively, if you plan to use these values more than once, you could also easily extend your Tailwind CSS configuration.

Here are the links to the relevant documentation pages:

Upvotes: 1

Dhaifallah
Dhaifallah

Reputation: 1855

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>

Upvotes: 0

Related Questions