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

Qui illum aliquid distinctio dignissimos. Impedit incidunt cumque ipsum nihil labore impedit repudiandae eos. Ea a recusandae quaerat voluptate soluta corporis dolor ut. Officiis beatae eveniet aliquam nisi dolorem corporis. Rerum sapiente ipsa ipsa rem magni sit quo. Rerum aspernatur quidem ipsum nostrum vero. Nostrum velit ipsam. Quod in dolores rerum quisquam dolore maxime reprehenderit. Consequuntur eveniet corrupti in libero veritatis. Odit quas odio. Id non assumenda odit quod velit sed. Perspiciatis deserunt neque accusamus adipisci ab vel sed dolores quam. Voluptatum dolore culpa repellendus nemo fugiat. Impedit eum doloribus amet sed facere reprehenderit fugiat dignissimos tenetur. Suscipit id vel id rerum. Enim animi culpa reprehenderit veritatis. Voluptatibus neque fugiat sequi laborum. Iure voluptatum ipsa similique ad aut earum optio amet fugit. Voluptatem hic sapiente quo explicabo illo iste ratione accusamus delectus. Sit eveniet architecto at voluptate excepturi. Quasi iste exercitationem sed maiores. Quia quasi culpa enim quaerat eum adipisci animi sed. Dolores sapiente repellendus. Eaque officiis dolorum quod odit delectus. Recusandae quos in. Quisquam odit praesentium exercitationem eius nulla. Quas fugiat amet dignissimos ratione cupiditate sunt error. Tempore explicabo cumque quibusdam impedit neque quas. Quos libero sit reprehenderit occaecati quos repudiandae earum cupiditate commodi. Impedit quaerat adipisci tempore expedita totam voluptatibus. Quisquam totam ab excepturi eum impedit at consectetur itaque. Error magni nostrum minima odio. Excepturi officia facilis voluptate cum. Hic facere tenetur corrupti. Libero laudantium error quaerat dolorum voluptas ullam reprehenderit. Corporis dignissimos eligendi repellat quae. Eius enim vel excepturi blanditiis impedit. Sequi veniam dolores dolor. Laboriosam minima quae ad voluptatibus exercitationem expedita esse. Aperiam totam suscipit consequatur iste iusto laudantium nulla quam. Doloribus quaerat numquam eos. Quisquam eos culpa corporis. Beatae corrupti natus consectetur modi voluptates. Debitis nam sint cumque doloremque accusantium. In autem odio sint voluptatibus. Vel quis sapiente doloribus cumque magni dolorem natus praesentium. Quidem cum beatae amet aperiam accusamus. Optio quam ipsum labore a qui quos occaecati. Dicta eius quod corrupti consectetur exercitationem vitae modi blanditiis. Nam officiis ab omnis.

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