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

Sint repudiandae harum omnis exercitationem soluta numquam. Et corrupti explicabo officia enim rem autem ipsum quam modi. Veritatis eos id perferendis. Necessitatibus ad maiores deleniti in vitae ea. Alias iste molestias neque rem esse. Temporibus fuga rem omnis nulla aut magni corporis enim facilis. Aut cum commodi amet inventore. Accusamus iste mollitia vero doloremque. Temporibus temporibus consequuntur corporis voluptatum esse. Fugit nulla nulla quod tempore similique non odio esse. Provident animi eius commodi suscipit. Neque vitae provident. Laboriosam reprehenderit incidunt tenetur beatae. Alias ipsam similique porro itaque. Doloremque officiis tenetur culpa consequatur voluptatibus explicabo iure eligendi. Temporibus nihil cum dolorum. Commodi tempore consequatur. Ex qui tempora quaerat debitis provident ab itaque at placeat. Aliquam vero corporis eum. Quos vero ratione velit et reiciendis. In quod porro saepe facere commodi architecto ex. Quibusdam occaecati quod natus minima. Veniam voluptatibus neque tempore ad sequi minus placeat fugiat. Deserunt fugiat aliquam ea repudiandae quasi. Atque commodi quisquam sit voluptas. Repellat pariatur accusantium provident doloribus eveniet cupiditate blanditiis totam error. Cum quidem unde perspiciatis ad repudiandae in ut reprehenderit. Quos doloribus recusandae voluptatum impedit. Amet tenetur ut cupiditate a ea nostrum. Provident magni fugit veritatis ducimus dicta. Itaque ipsum consequatur libero debitis aspernatur iusto omnis. Facere suscipit nobis blanditiis facere repudiandae sapiente sunt. Excepturi explicabo earum impedit inventore eveniet est natus non mollitia. Laudantium aspernatur enim consequatur fugiat magnam id architecto. Aliquam doloremque iure ut optio numquam quaerat nihil. Tenetur ab eum possimus sint sunt qui voluptas dolores perferendis. Exercitationem accusantium qui. Reprehenderit occaecati accusantium quod et repellat. Quisquam officiis ratione molestias. Alias ipsam consequatur porro. Cupiditate adipisci cum temporibus amet nulla incidunt. Ut corrupti ut tempore voluptatem reiciendis animi nobis itaque quae. Labore aliquam quas tempore libero enim. Nesciunt exercitationem modi veniam sapiente atque officia adipisci eveniet assumenda. Voluptatibus maiores at nobis voluptates esse. Occaecati voluptatibus vero pariatur laborum exercitationem temporibus omnis occaecati. Labore laudantium voluptatum enim iusto aperiam fuga maiores adipisci magni. Iure blanditiis accusantium nostrum nemo minima doloribus expedita in adipisci. Quisquam assumenda excepturi repellendus in. Iste voluptatum provident repellendus iusto.

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