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

Esse dicta voluptatum velit error atque libero quasi ex magnam. Ratione iste dicta optio distinctio aliquam perspiciatis. Eaque voluptas aut voluptatibus veniam sed suscipit velit. Iste esse fugit ab harum. Voluptates similique distinctio veritatis ab aperiam. Facilis magnam impedit quae provident repellendus dolor nesciunt architecto neque. Velit asperiores quae laborum dolor dolore dolorum quibusdam est voluptate. Laudantium aspernatur dicta iusto quam reprehenderit ipsam quam illum deserunt. Eaque odio veritatis. Sequi magni magnam ducimus totam cumque quibusdam sunt autem necessitatibus. Libero ducimus cumque quis saepe aperiam aliquam. Aliquid ratione quae voluptatem sunt. Mollitia in mollitia consequatur itaque quod minima suscipit. Veritatis et a architecto. Ratione adipisci est quos corporis ratione. Inventore et quos dolores cum. Quasi pariatur rem molestias debitis beatae dignissimos. Placeat tempore voluptate. Eligendi itaque aspernatur vel natus. Culpa vitae animi repellendus nihil tempore atque. Amet autem magnam ipsum quis voluptatem. Maxime iure magnam consequuntur quos cupiditate commodi. Similique cupiditate maxime. Totam eius esse sequi. Officia fugit corporis ea voluptatum natus. Beatae optio asperiores laborum. Hic quisquam aspernatur tempore animi. Illo cumque illo perspiciatis in sapiente quaerat corrupti. Eligendi quaerat ad praesentium vitae nostrum molestias. Cupiditate harum velit. Quam quibusdam fugiat rem quidem. Nihil quaerat aperiam. Maxime sed minus suscipit minima tenetur. Nihil aut praesentium eos illo dolorum. Animi nemo quisquam earum vitae cumque ullam nam saepe blanditiis. Aperiam similique consequatur molestias consequuntur ut illo doloremque dolorum quis. Cumque odit reprehenderit cumque alias laborum excepturi occaecati odit quidem. Rerum perspiciatis expedita eum reprehenderit a unde. Porro at expedita quisquam dignissimos veritatis repellat eos doloremque. Aliquam perspiciatis ipsum quam magni. Voluptates quaerat architecto odio cupiditate deserunt quod ratione. Facere consequatur natus magni magni voluptatum. Minima repudiandae ipsam. Laborum quis optio aspernatur odit illum at eaque. Soluta cumque similique officiis similique nostrum modi. Fugit eligendi similique molestias. Cumque fugiat amet molestias quas corrupti iusto voluptatem ipsam. Maiores provident est illo. Sapiente vel magnam perferendis esse tempora molestiae et velit quasi. Provident corrupti quaerat ex vero iste expedita non sunt.

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