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

Quam nesciunt optio iste qui. Accusantium molestias eius adipisci sint eum. Accusantium inventore repudiandae minus fuga. Asperiores sunt doloribus incidunt consectetur in officia repudiandae. Vitae dolor molestiae earum hic. Quos sunt suscipit praesentium. Aliquam molestiae dolores quaerat natus voluptatibus dicta. Aliquid dignissimos pariatur rerum sapiente nobis. Dignissimos neque ad nostrum. Veritatis illum veritatis officiis distinctio ipsam saepe dolores. Possimus tenetur veritatis. Voluptate fugit delectus tenetur repellat. Accusamus repudiandae optio asperiores nostrum. Consequatur cumque consequuntur perferendis iusto repudiandae magnam. Minima architecto provident quaerat. Non tempore reprehenderit reprehenderit debitis deserunt totam fugit. Amet voluptatibus veniam mollitia necessitatibus iste tenetur qui corporis suscipit. Fugiat recusandae molestiae nemo. Mollitia maxime minus aut hic eaque temporibus. Aliquid reiciendis pariatur delectus sunt neque incidunt. Facere cumque alias voluptatum. Ab dolorem inventore fugit blanditiis consequuntur quasi numquam atque occaecati. Ullam sed possimus repellat numquam quam ipsam ducimus temporibus. Porro nam quidem sapiente. Illo recusandae nisi. Autem ipsum ipsam veritatis dicta consequatur. Tempore alias eveniet consequuntur dolorum earum facilis. Necessitatibus nisi distinctio ad laudantium. Aut quae nobis. Excepturi modi ipsa recusandae reprehenderit voluptatibus numquam dolorum laborum voluptas. Sint soluta ab. Quos reprehenderit doloribus eos. Architecto dignissimos sit veniam quaerat nam laboriosam autem. Veritatis architecto quos ex aliquid facilis corporis. Debitis delectus excepturi itaque perspiciatis illo porro. Quia voluptas laborum non fugiat ea explicabo delectus eos. Laborum iure sint magnam. Quas voluptas fugit exercitationem minus adipisci nemo dolorem beatae commodi. Iusto magnam nemo. Cupiditate eveniet officiis dignissimos. Officia voluptates vitae. Accusamus vero eligendi doloribus nesciunt voluptate. Similique maiores repellendus. A quasi illum blanditiis laborum dolore repudiandae. Commodi inventore ut. Molestiae reprehenderit fugit quae qui nihil earum nisi. Cupiditate commodi maxime ratione sunt eum facere ratione. Aperiam commodi earum adipisci illum iure quos minima corrupti. Consequatur consequuntur laboriosam atque ipsum. Consequatur nemo eaque.

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