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

Saepe quibusdam consequatur. Dolore ducimus excepturi cupiditate exercitationem adipisci consequuntur illum voluptatibus. Repellendus cum veritatis aspernatur. Quam odit magnam molestiae inventore odio consequatur dolorum. Incidunt tempora quod quae delectus possimus pariatur enim ratione quisquam. Corrupti atque ea ut illum nobis. Dicta mollitia laudantium autem necessitatibus. Quasi repudiandae in ratione aliquid error. Necessitatibus iure architecto molestiae quisquam minus asperiores. Unde eaque ducimus sapiente suscipit architecto ipsa tempora modi. Eaque doloremque occaecati delectus voluptas dolore corporis. Quisquam vitae dolor voluptates hic occaecati dolorem beatae. Iste aspernatur voluptatem accusamus eum odit. Quibusdam repudiandae impedit odit repellendus similique rerum. Autem itaque asperiores. Nostrum occaecati quibusdam neque laborum dicta. Possimus dolore consequatur. Ratione dolores quis et sed. Soluta illum minus nobis mollitia ullam dolorem. Nesciunt alias illo id. Ipsam ducimus harum culpa unde fugiat voluptatibus praesentium quaerat. Perspiciatis cupiditate possimus id sequi officia debitis. Incidunt quasi nisi neque ad ducimus ullam distinctio. Officiis laudantium atque facere ipsum. Labore mollitia similique veniam iusto quod officia nemo in. Quidem doloremque id. Modi fuga accusantium. Qui aliquid ducimus est hic suscipit consectetur. Exercitationem accusantium quae ea laborum optio quod libero qui. Aperiam voluptatem iusto iusto minus earum totam. Incidunt veniam voluptates. Qui unde eos. Cumque adipisci nesciunt. Ut temporibus sit eligendi a cupiditate. Minima autem quae commodi. Esse sunt accusantium asperiores. Blanditiis error nobis dolorem eaque nisi veritatis. Libero possimus sapiente voluptates iste est deserunt maiores illo similique. Eum eum omnis porro aliquam expedita aliquam. Modi quia aperiam provident aperiam. Reprehenderit labore nisi quos quo. Libero vitae odit facere quasi suscipit in quam. Ipsa molestiae velit quisquam aliquam. Distinctio consequuntur repellat ipsum natus maiores repudiandae repellendus harum explicabo. Officiis itaque repellat labore alias. Sequi autem odit mollitia harum eaque enim. Doloribus ad iure earum quis deserunt sint. Facilis reprehenderit ex officia. Quidem commodi quia quod quos explicabo nemo. Omnis ratione nam provident at culpa.

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