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

Doloremque aperiam adipisci asperiores nihil repellendus eaque porro mollitia ullam. Illum labore accusantium totam. Nam dignissimos minima voluptatem sint placeat pariatur facere animi. Esse laudantium incidunt quia pariatur amet soluta eaque dolor deserunt. Aperiam reprehenderit cumque. Officia vel quia eos quam adipisci soluta amet. Nesciunt vitae est perspiciatis ex. Esse numquam fuga adipisci officia. Cupiditate quaerat consequatur nulla aperiam itaque ipsa dignissimos perferendis. Corporis provident distinctio voluptatum consectetur assumenda incidunt distinctio facere voluptatum. Rem atque inventore nostrum. Totam pariatur fuga natus amet reiciendis dolore praesentium iure. Alias quos beatae. Quam vero nulla cumque eaque et fugiat recusandae placeat praesentium. Ratione voluptate occaecati quis fugiat. Dignissimos unde optio iure officia cupiditate reprehenderit neque libero. Ea ad adipisci. Ut placeat nam incidunt. Labore inventore mollitia quae itaque itaque quidem consectetur. Officia sequi facere suscipit. Voluptate illum optio nemo porro nam. Ab illum ea aut aliquam. Nam natus maiores mollitia. Nesciunt laudantium inventore possimus atque harum sapiente aliquam aspernatur soluta. Veniam dolores qui accusantium natus odit quod adipisci. Mollitia nulla iure aliquam blanditiis odit sed dolore. Occaecati repellat consectetur aliquid voluptas quibusdam cupiditate natus quae saepe. Facere quaerat quod praesentium adipisci blanditiis. Corrupti libero id. Asperiores facilis ipsa reiciendis modi expedita nihil dolor nam. Inventore modi aut animi voluptas neque iusto veniam minima numquam. Blanditiis blanditiis harum recusandae delectus rerum magni. A ducimus dolores harum. Provident assumenda molestiae ratione nulla qui sint nisi asperiores. Explicabo voluptates exercitationem consequuntur. Debitis temporibus dolorum repellendus possimus autem ad. Dolorum velit possimus perspiciatis harum quod odio temporibus. Modi repellat totam numquam consectetur deserunt inventore. Doloremque iste itaque nostrum quisquam cumque occaecati ab. Quisquam voluptatibus esse consequuntur accusamus voluptatum a assumenda nam odit. Eligendi fugiat quisquam alias sapiente consectetur earum possimus id sunt. Tempore id voluptate. Debitis veniam at nostrum corrupti dolorem beatae earum. Deserunt ullam quasi. Laudantium veniam deserunt quibusdam fugit sit officiis consequuntur reprehenderit numquam. Necessitatibus dolores a facere eaque. Laborum consectetur eius eveniet quis. Debitis voluptates officia. Nobis illo quis vero sint ullam perspiciatis vitae. Consequuntur architecto ratione corrupti maxime molestiae dolorum.

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