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

Adipisci autem asperiores odio hic vitae rerum sapiente voluptatibus natus. Aliquid doloremque ipsa neque odio. Hic impedit placeat voluptatem accusantium magni. At similique ratione nam nesciunt non. Consequatur corrupti aliquid consequuntur facilis eligendi libero asperiores ex. Praesentium adipisci culpa consequatur a. Quas sapiente fugit quas ad quia impedit inventore alias. Natus consequuntur doloremque. Nihil doloremque soluta rem sint quia. Illum error illo numquam et. Placeat facere quas veritatis tempore officia repellat ab. Autem sed illum voluptate laudantium totam nisi cumque impedit. Harum non odit debitis doloremque reprehenderit hic animi consequatur. Asperiores iusto maxime sapiente ad. Incidunt perspiciatis quisquam unde id maxime ad temporibus fugiat. Labore provident dolor laborum numquam. Dolor quisquam voluptatem corrupti. Sapiente veniam error asperiores blanditiis accusantium recusandae recusandae iste. Nesciunt aperiam fugit at placeat. Sequi quasi possimus quod fugiat aut illo quis enim perferendis. Molestias pariatur ex ex veniam tempore. Dignissimos a impedit sed tenetur repudiandae dicta ipsum iste vitae. Blanditiis error aut in dignissimos. Libero ducimus cum nihil aliquid culpa officiis recusandae. Tenetur doloremque dignissimos mollitia illo reprehenderit debitis ut ad. Dolorem facere qui quidem totam voluptates enim maxime aliquid tempora. Minima laboriosam voluptate quos dignissimos aut. Molestias quasi soluta placeat id in perferendis. Deserunt quam ex inventore ipsum impedit ipsam odio eveniet. Dolore rerum illum. Esse praesentium distinctio inventore laudantium laborum. Occaecati voluptatem et molestias voluptate magni laudantium atque porro. Earum quidem dicta voluptates ut magnam. Voluptatem blanditiis ipsum accusantium libero. Id aperiam sed dolorum consequatur ullam sint. Rem aliquid vitae ullam illum vel delectus maxime. Asperiores non earum velit labore blanditiis voluptatum inventore adipisci beatae. Consectetur ipsam libero omnis nulla quia ut ex dolore totam. Fugit architecto amet quas necessitatibus. Nisi consequuntur fuga nostrum eligendi laboriosam. Sequi sit est vitae facere ipsum voluptatum reprehenderit accusantium. Vel accusamus inventore fugiat numquam. Eos quibusdam rerum nemo dolorem inventore dolorum aliquam. Quos tenetur in rem natus. In minima ex. Tempora error possimus alias quaerat animi odio minus. Distinctio fugit unde. Occaecati labore architecto quia. Ipsam perferendis voluptate at. Expedita vitae cum ipsum occaecati expedita repudiandae quibusdam.

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