Tailwind

Core

Provides a variety of globally scoped styles.

Source Page Source

Body Background

Your app's background is automatically set via a design token class. Adjust your theme's color scheme to customize. This affects both light and dark mode.

css 
body { @apply bg-surface-50-900-token; }

Selection

Selection color is also set via a token class. Try selecting the text in the card element below to preview this styling. Notice how selection color changes depending on the background.

The quick brown fox jumps over the lazy dog.

Try selecting the text above.

Mobile Focus

Interactive elements on mobile will briefly show a focus style when touched. Skeleton adjusts the coloring.

Scrollbars

Skeleton automatically provides custom scrollbar styles in supported browsers. Use .hide-scrollbar to disable scrollbars.

Test Scrolling Here

Unde fugiat illum. Non necessitatibus laboriosam sunt. Debitis impedit sit dignissimos doloremque. Quos explicabo fuga dolore dolorem ea corrupti iure tenetur. Reprehenderit quia dolores unde aspernatur deleniti aliquam autem. Facilis dicta reprehenderit. Velit at aperiam assumenda. Recusandae consequuntur dicta voluptas dolores deleniti voluptates eveniet harum consequuntur. Doloremque dolores accusamus magni. Quam rem esse nisi. Corporis id facere at possimus doloribus. Fugit quam nihil maxime odio expedita. Beatae molestias maxime sint. Quasi consequatur natus iste qui quisquam. Sint quaerat modi fugit. Similique natus fugiat. Voluptates quae exercitationem id quasi distinctio. Possimus consectetur debitis vel perspiciatis quia accusamus a. Minus ab iure doloribus enim soluta temporibus qui est at. Aut id eos perferendis laborum beatae quidem veritatis. Vitae quidem non. Excepturi autem illum. Facilis minima reiciendis nesciunt veritatis voluptates. Nesciunt animi eveniet consectetur itaque. Quo corporis animi qui mollitia esse rem omnis et. Rem illo perferendis quod. Nihil atque tenetur harum beatae et. Odio natus quidem qui in veritatis alias voluptatum accusantium. Quae incidunt tenetur sint maiores nihil laboriosam. Enim soluta beatae deserunt illum molestias doloremque voluptate tempora. Iste ad ducimus eaque quae in autem fugit. Asperiores cupiditate vero. Iusto provident est quaerat aut distinctio odit dignissimos asperiores exercitationem. Exercitationem quas fugit ex nesciunt sunt. Molestiae asperiores repellat reprehenderit necessitatibus sunt. Ea nemo praesentium voluptate sapiente deserunt. Totam necessitatibus error sapiente tempora eveniet tempore eveniet. Hic nostrum tempore natus asperiores. Quae consectetur tempore dolores similique. Placeat occaecati consequuntur. Molestiae provident aut blanditiis. Dolorum asperiores natus dolore. Itaque assumenda eaque eius eveniet rem. Voluptatibus assumenda reprehenderit odio at minus provident et. Velit molestias voluptate autem reiciendis tempora quod. Ea voluptatibus inventore eligendi aut illo. Saepe omnis voluptas quisquam voluptates quae. Recusandae eaque ad placeat nemo excepturi ducimus voluptatem. Qui eos numquam veniam vitae praesentium ut. Corporis iusto dolorem aliquid.

Dividers

Native hr horizontal rule elements respect your theme settings automatically. Use border size to adjust the width.

Divider Styling

Dividers may be dashed, dotted, or doubled.

Vertical Dividers

Divide columns with the .divider-vertical class. You can apply it with a span tag. Adjust the height as desired.

Left

Right