Developer
Intros How it works API reference Turbo CSS Fundamentals Utilities Selectors Child Next sibling After sibling Descendant Self Viewport width Device type Hoverable Empty Not empty Even Odd First Not first Last Not last Hover Focus Active Visited Valid Invalid Enabled Disabled Checked Unchecked Mode Placeholder Selection Before After Thumb Tags Download Turbo UI
Turbo Playground
License Blog
Combinators
Child Next sibling After sibling Descendant Self
Viewport
Viewport width
Device
Device type Hoverable
DOM Structure
Empty Not empty Even Odd First Not first Last Not last
Interaction
Hover Focus Active Visited
State
Valid Invalid Enabled Disabled Checked Unchecked Mode
Pseudo elements
Placeholder Selection Before After Thumb
Tags
Tags

Tags

Syntax

Class
Properties
{...}{tag}:{...}
{...} {tag} {...} { ... }

Parameters

tag
a | audio | b | blockquote | br | button | code | canvas | div | em | embed | figure | h1 | h2 | h3 | h4 | h5 | h6 | hr | i | iframe | img | input | label | li | object | ol | option | p | picture | pre | q | s | section | select | small | span | strong | sub | sup | svg | table | tbody | td | textarea | tfoot | th | thead | tr | u | ul | video

HTML tag name.

<div class="t1 flex flex-center flex-wrap @/b-3-blue @/button:bg-c-red"> <a class="t1 flex flex-center w-32 h-32 m-8">1</a> <button class="t1 flex flex-center w-32 h-32 m-8">2</button> <p class="t1 flex flex-center w-32 h-32 m-8">3</p> <h1 class="t1 flex flex-center w-32 h-32 m-8">4</h1> <div class="t1 w-full flex flex-center p-4"> <a class="t1 flex flex-center w-32 h-32 m-8">5</a> <button class="t1 flex flex-center w-32 h-32 m-8">6</button> <p class="t1 flex flex-center w-32 h-32 m-8">7</p> <h1 class="t1 flex flex-center w-32 h-32 m-8">8</h1> </div> </div>
<div class="t1 flex flex-center flex-wrap @/../b-3-blue @/../button:bg-c-red"> <a class="t1 flex flex-center w-32 h-32 m-8">1</a> <button class="t1 flex flex-center w-32 h-32 m-8">2</button> <p class="t1 flex flex-center w-32 h-32 m-8">3</p> <h1 class="t1 flex flex-center w-32 h-32 m-8">4</h1> <div class="t1 w-full flex flex-center p-4"> <a class="t1 flex flex-center w-32 h-32 m-8">5</a> <button class="t1 flex flex-center w-32 h-32 m-8">6</button> <p class="t1 flex flex-center w-32 h-32 m-8">7</p> <h1 class="t1 flex flex-center w-32 h-32 m-8">8</h1> </div> </div>

Specification test cases

The test cases below are imported from the Turbo CSS specification. They have been executed upon loading this page.
Tag: a
t1 @/../a:block
.t1.\@\/\.\.\/a\:block a { display: block; }
Tag: div
t1 @/../div:block
.t1.\@\/\.\.\/div\:block div { display: block; }
Tag: h1
t1 @/../h1:block
.t1.\@\/\.\.\/h1\:block h1 { display: block; }
Platform
Boomla Store Website Builder Changelog Status
Learn
Intros How it works API reference Turbo CSS Glossary
Company
Contact Support About
Get involved
WishList