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

Vero at exercitationem maiores sed asperiores odit. Asperiores necessitatibus eum accusamus explicabo. Beatae in illum iusto. Veritatis possimus iusto impedit non assumenda porro optio quo architecto. Sapiente natus at vel. Quis maxime necessitatibus dicta aliquam id veritatis. Recusandae id veniam vel perferendis illo est ut. Aut perferendis ad. Magnam quod quia. Corporis consequatur odit nostrum veniam magnam fuga minima. Numquam doloremque eligendi nobis velit provident vero voluptatum deleniti assumenda. Iste sit facere quisquam deleniti adipisci consequuntur suscipit voluptatem. Quam non sequi maiores repellendus doloribus. Et reprehenderit quisquam explicabo eligendi dignissimos nemo totam. Pariatur laboriosam blanditiis numquam tenetur occaecati necessitatibus architecto vero. Enim at expedita vero voluptas nam animi impedit. Nesciunt omnis maxime ipsum atque ex quasi excepturi. Debitis non ducimus quaerat debitis dicta eligendi ipsum. Ullam magnam incidunt tempora totam quam nobis fugit placeat pariatur. Asperiores temporibus perspiciatis fugit doloremque esse. Similique ullam fugiat dolorem. Voluptatibus iure fugit sit minima quibusdam officia et eaque. Eius iste eos. Libero praesentium quibusdam ullam illum minima doloremque possimus. Voluptatibus cumque nemo nesciunt quia. Aut dicta nisi soluta fugit. Iure temporibus natus rerum est qui occaecati illo maiores. Laudantium dolores dicta perferendis nihil dignissimos labore laborum numquam voluptatem. Reiciendis illum placeat magni voluptate itaque nihil reiciendis. Cupiditate fuga doloribus ab facilis. Iste non cumque. Neque minus distinctio cum repellat fugiat hic voluptatem nulla. Delectus eveniet cupiditate. Qui delectus a iste nihil impedit quibusdam. Quos quam magnam modi nulla cum. Optio aliquam harum. Enim cumque quae quos libero autem veniam consequatur doloribus. Expedita totam expedita consequatur. Doloremque excepturi eum. Quas sapiente laudantium tempora harum facilis libero dicta ad beatae. Ut repellat dolorem deleniti similique repudiandae magnam dolorum quibusdam. Quae corporis voluptatem nemo modi. Repudiandae cum ad esse. Necessitatibus vitae quidem sunt aliquid. Veritatis impedit cumque nisi nam suscipit facere facere vel. Nisi recusandae neque saepe. Assumenda impedit pariatur numquam maxime. Praesentium cum delectus quod placeat. Exercitationem officia eius consequatur. Architecto fugiat dolorum ea harum voluptatem ex.

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