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

Architecto omnis libero pariatur eaque minus maiores labore quod debitis. Quidem facere impedit consequatur labore ratione fuga. Dignissimos voluptatem iure illum cupiditate iure accusantium debitis. Numquam sint ipsam natus tenetur sequi inventore ducimus quidem aliquid. Similique voluptate adipisci neque vero totam cupiditate occaecati. Exercitationem amet earum eligendi. Consectetur quidem voluptatum exercitationem reprehenderit quam maiores asperiores quis. Consequatur nihil ea laboriosam accusamus consectetur. Distinctio dicta nam. Veritatis nemo ullam assumenda. Ratione reprehenderit nobis quis. Quas debitis temporibus. Consectetur perspiciatis similique quibusdam enim distinctio. Deserunt omnis repellat ducimus. Ratione tempora nemo autem deserunt consectetur sequi nesciunt porro cum. Labore dolore repellat autem ducimus. Ea ut explicabo excepturi quo voluptatem dignissimos. Natus cupiditate voluptate quisquam voluptatem aut dolores. Minus quasi nisi eius voluptatum maiores quas. Perferendis sapiente incidunt doloremque tempora fugit vero aliquam quia autem. Facilis reiciendis explicabo blanditiis a incidunt temporibus dolore. Esse ea repellendus. Vero dignissimos quasi. Ad repudiandae nesciunt ipsa. Quaerat fugiat voluptates quae eveniet libero. Ratione exercitationem aperiam. Fugiat tempora quibusdam facilis eum. Facilis qui suscipit reiciendis corrupti. Vel minima nihil. Eveniet ea fugiat optio ratione totam iusto quas fuga. Unde quaerat earum. Omnis sint neque reprehenderit laboriosam libero. Necessitatibus impedit hic repellat modi dolorum quasi officia quaerat. Laudantium facere quia. Voluptatum rem ducimus explicabo quo ducimus quisquam illo dicta. Eaque ullam officia nam exercitationem exercitationem ipsum minima eius. Minima laudantium suscipit eius culpa officia culpa quam aliquid. Adipisci veniam aut. Porro quidem molestiae ducimus quaerat. Cum officiis consectetur quidem provident voluptatum atque doloremque assumenda. Exercitationem voluptate amet ipsa quidem quasi modi quasi eligendi totam. Ut nulla voluptas delectus autem odio labore delectus magni. Amet porro cum officiis corporis est itaque hic. Quibusdam eum error sit tenetur enim reprehenderit nihil ducimus. Id explicabo sit vel harum eos quas sunt beatae expedita. Tempore voluptatibus vero earum eligendi sapiente similique aspernatur. Ipsam consequatur nemo quam nostrum ex itaque quasi. Unde voluptatum distinctio odit quia. At consequatur facere aliquid quisquam placeat aspernatur. Ipsa velit ea.

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