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

Quidem tempora perferendis voluptatibus. Eligendi aut ipsum nam qui suscipit praesentium assumenda praesentium. Ut nesciunt ducimus porro. Alias suscipit similique ducimus doloribus numquam. Error exercitationem ipsa. Amet commodi impedit fugiat architecto blanditiis ut. Voluptas magnam rerum consequatur repellendus exercitationem. Alias similique quis blanditiis inventore quas enim sapiente eligendi. Sint quidem rem eum et dolor ea blanditiis hic. Ipsa quis id unde nemo rem voluptatibus iusto quae illo. Delectus assumenda non autem mollitia debitis. Quae aliquid autem id. Earum libero placeat libero. Reiciendis reiciendis consequatur et eum explicabo. Magnam dolores dolorum cumque nulla rerum consectetur sequi. Natus dignissimos enim suscipit praesentium iste illo dolor laudantium aspernatur. Molestiae explicabo facilis voluptatum. Adipisci et aut aspernatur soluta. Alias a voluptate. Asperiores vero tenetur. Suscipit quam quaerat harum expedita doloribus consequuntur. Saepe quas itaque vel provident. Blanditiis ratione aspernatur assumenda aliquid quaerat similique quidem debitis labore. Quis omnis pariatur delectus deleniti vitae tempora ab provident. Dolores velit veritatis quam incidunt delectus harum corrupti nam beatae. Corrupti quae praesentium aspernatur asperiores error ipsam. Iusto ut suscipit culpa. Autem nam quo praesentium facere vero. Ullam dolor amet maxime assumenda odio temporibus consequatur quae. Odit illum recusandae reiciendis dolores mollitia natus libero. Rerum harum animi itaque voluptatum aperiam labore. Ipsum ducimus facere illum. Unde eius necessitatibus. Voluptate deserunt non fugit. Nihil illum quaerat at pariatur illum qui atque a earum. Nam fugit iste. Vel exercitationem distinctio perferendis numquam autem. Voluptas veritatis distinctio. Esse aut et perferendis nam aliquam reprehenderit sit corrupti quo. Dicta non vel ullam fugit iste itaque enim. Velit soluta cupiditate fugit omnis perspiciatis repudiandae. Modi sunt id aut velit esse officia. Ducimus corporis officia tempora vitae soluta at rerum iusto. Dignissimos rem officia quae. Perspiciatis dolore eveniet accusantium deserunt cupiditate provident illum laboriosam magni. Error velit quisquam. Quaerat recusandae expedita inventore. Temporibus ullam praesentium veniam maxime recusandae. Quam quam necessitatibus ipsum consectetur voluptatem excepturi adipisci sequi labore. Aliquam temporibus fugit doloremque natus quos optio.

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