Tailwind CSS How to Code Pixel Perfect Design

Tailwind CSS how to code pixel perfect design

Ok got it, I need to edit tailwind.config.js and set custom sizes there. For example:

height: [
  ...
  '278px': '278px',
  ...
]

So now this size can be set with <div clas="h-278px">...</div>

Update:

After completed many projects on top of TailwindCSS I learned that it's not very optimal to set spacing/w/h... in tailwind config if it's used only once. It's better to go with the custom class you can always use @apply in that class anyway.

Update 2021:

As of tailwind version 2.1 we can enable JIT and use arbitrary styles like this:

mb-[278px]

How can I specify exactly 600px width in Tailwind CSS?

If you configure your Tailwind install to run in just-in-time mode, and you are running tailwind 2.1+, you can use their arbitrary value support. https://tailwindcss.com/docs/just-in-time-mode

For example, I needed a width of 600px, here is how I specified it:

h-[600px]

Tailwind - How to customize padding such as px-10

You can add custom padding values as shown in their documentation

  // tailwind.config.js
  module.exports = {
    theme: {
      spacing: {
       sm: '10px',
      }
    }
  }

and use it as

<div class="px-sm"> .. <div/>

OR

Use your custom values inside class by using JIT mode

<div className="pl-[10px] pr-[10px]"> .. </div>

How to make pseudo line in tailwind?

I'm not sure if I understand your question well, but need to read tailwind docs to understand how tailwind works, so here is what I did I hope it's what you are looking for :

<script src="https://cdn.tailwindcss.com"></script>
<div class='h-screen w-screen'>

<div class="h-[400px]  bg-green-300 w-[20px]"></div>

</div>

---

Related Topics