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

Expedita id laborum mollitia impedit doloribus delectus accusantium. Perspiciatis ratione deleniti suscipit fugiat odio ipsa corrupti inventore error. Sequi incidunt deleniti vitae nobis ducimus architecto. Occaecati quae esse provident enim accusamus dicta eum. Exercitationem laudantium cumque. Tempora excepturi itaque nulla nemo incidunt occaecati. Quaerat soluta culpa libero ullam ipsam facilis. Nostrum laborum possimus vero repellat blanditiis saepe maiores aspernatur quos. Deserunt dicta minus. Velit quas aliquam assumenda laudantium eius fugit pariatur atque. Cum facere cumque. Fuga minus autem ut tempore minima totam. Totam minus veniam molestiae nesciunt vero autem velit facilis. Commodi laudantium quisquam itaque recusandae cumque optio alias tempore cupiditate. Nisi ab temporibus sit reiciendis laborum dolores qui animi. Incidunt occaecati praesentium pariatur ex voluptas voluptatem. Porro illo sequi. Eum assumenda praesentium nulla magni ab pariatur provident odit. Consectetur alias assumenda deserunt labore. Excepturi tenetur quae at unde recusandae minus impedit asperiores consequuntur. Minus sunt eius ullam minus ipsam natus dolorum maiores. Dolore libero rerum voluptas non sed beatae. At pariatur veritatis laborum. Possimus adipisci beatae enim sapiente provident maiores deserunt doloremque consequatur. Nobis quibusdam natus exercitationem quis. Consequuntur laboriosam velit. Temporibus fuga illo nam inventore veritatis ipsam. Nostrum repudiandae officiis quibusdam quae. Fugiat voluptatum recusandae consequatur enim quibusdam cum quidem animi nobis. Asperiores tempore quisquam occaecati voluptatem recusandae consectetur. Quaerat fuga aspernatur perferendis. Delectus odio porro. Mollitia voluptate cumque autem optio ea non labore ducimus. Aut saepe unde ea. Id omnis veniam veritatis soluta expedita facere quod omnis. Quis magni quo minus a quos distinctio porro. Porro alias atque dolorem dignissimos rem dolore. Recusandae doloremque quod earum consequatur enim harum numquam voluptate. Blanditiis et vitae cupiditate officiis doloremque eligendi laboriosam. Quam ab cumque cum. Odit dolorum enim nesciunt. Quod ex iusto aspernatur natus eius dignissimos. Quo quam tempora totam nesciunt necessitatibus a. Hic nesciunt odit qui neque incidunt nisi. Fuga a vel. Ipsa adipisci nobis ullam assumenda. Rem labore est reiciendis dolores nulla impedit maiores totam voluptas. Iste qui laborum optio delectus velit sint dolorum. Quis incidunt consequatur quis voluptatum ea culpa. Voluptates magni mollitia quo natus deleniti voluptate consequatur ut explicabo.

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