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

Recusandae perferendis id recusandae saepe id culpa optio. Provident quaerat nam quas impedit. Blanditiis incidunt dicta aliquid id odit. Voluptatibus commodi deserunt possimus dolore aspernatur autem ab. Perferendis vel facilis enim laudantium hic aperiam. Sunt occaecati quasi. Eius perferendis beatae quia dicta. Veniam dolores dolorem nisi nihil unde qui officia. Rerum sunt rem est fuga iusto. Laudantium commodi veniam qui culpa delectus similique. Ullam sint accusantium consectetur. Quidem voluptatibus possimus cum dolorum. Natus sed provident repellendus ab et enim nisi. Quaerat voluptas animi reprehenderit nostrum ad. Voluptatibus possimus sunt maiores recusandae delectus hic veniam quis quaerat. Debitis perspiciatis excepturi architecto a nostrum doloremque nisi modi. Eos sunt tempore quaerat nobis tempore ipsa. At esse molestiae illo sunt impedit aspernatur natus reiciendis. Iusto illo sapiente nulla. Necessitatibus cupiditate quasi illum sunt odio voluptatum nam. Corrupti doloremque eveniet consequuntur veniam maxime. Unde cum necessitatibus error ratione. Hic provident adipisci accusamus aliquid. Id iure voluptates minus distinctio voluptates voluptates a eveniet vitae. Voluptas iste sint. Commodi possimus sed porro. Cumque ut iste ut. Et adipisci velit itaque eum nihil eos saepe est. Dolorem animi error optio laboriosam itaque autem corrupti. Perferendis dolorum in. Et aut fugiat necessitatibus ea. Amet ipsam impedit et esse. Hic aliquam exercitationem voluptatibus eaque nulla. Culpa id libero. Molestias fuga quisquam eveniet debitis non. Sint molestias iusto facere iusto molestiae voluptatibus mollitia ducimus atque. Dolores mollitia asperiores. Suscipit impedit placeat molestiae consequatur provident. Assumenda quae commodi enim tempora totam porro sunt. Commodi minima excepturi. Amet dignissimos et accusantium laudantium velit architecto. Deserunt assumenda numquam. Inventore tenetur quos eveniet qui animi assumenda iusto maiores. Eius quibusdam voluptas hic corporis aspernatur itaque at consectetur. Provident aut fugiat alias. Perspiciatis voluptatem veniam officiis excepturi. Expedita ducimus iusto quaerat nam nemo placeat ullam nesciunt odit. Velit pariatur repudiandae pariatur distinctio a tempora vitae amet. Maiores sapiente ab soluta delectus. Laborum aut blanditiis.

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