Tailwind Syntax Examples

Input

<div class="p-8 flex"></div>

Output

<div class="p-8 flex"></div>

// css

.p-8 {
  padding: 1rem;
}
.flex {
  display: flex;
}

Input

<div class="p-[2rem] mt-[5vw]"></div>

Output

<div class="p-[2rem] mt-[5vw]"></div>

// css

.p-[2rem] {
  padding: 2rem;
}
.mt-[5vw] {
  margin-top: 5vw;
}

Input

<div class="p-[calc(100%-5rem)]"></div>

Output

<div class="p-[calc(100%-5rem)]"></div>

// css

.p-[calc(100%-5rem)] {
  padding: calc(100% - 5rem);
}

Input

<div class="p-[calc(100%-theme(space.8))]"></div>

Output

<div class="p-[calc(100%-theme(space.8))]"></div>

// css

.p-[calc(100%-theme(space.8))] {
  padding: calc(100% - 2rem);
}

/* theme(space.8) will be converted 
   to 2rem by the compiler, based on the 
   theme config for space.
*/

Input

<div class="[padding:5vw] [align-items:inherit]"></div>

Output

<div class="[padding:5vw] [align-items:inherit]"></div>

// css

.[padding:5vw] {
  padding: 5vw;
}
.[align-items:inherit] {
  align-items: inherit;
}

Input

<div class="[margin:theme(space.8)]"></div>

Output

<div class="[margin:theme(space.8)]"></div>

// css

.[margin:theme(space.8)] {
  margin: 2rem;
}

/* theme(space.8) will be converted 
   to 2rem by the compiler, based on the 
   theme config for space.
*/

Syntax Highlight by bright

Created by Jacopo Marrone