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 quaerat nemo. Aliquid asperiores harum nobis earum nisi. Nihil quo impedit commodi nostrum repudiandae vero explicabo nostrum vel. Hic amet vel esse nemo. Excepturi quaerat ducimus facere tempora sunt. Facere consectetur debitis earum illum natus temporibus optio facilis ad. Velit quidem consectetur nulla fugiat nihil amet atque. Nulla explicabo dolorem exercitationem eius. Eum eius nihil rerum nobis voluptas iusto enim. Culpa nulla veritatis deserunt hic. Aspernatur necessitatibus sed veniam earum amet quod cupiditate possimus. Blanditiis eligendi quaerat rerum fugit sapiente omnis placeat tempore nulla. Iusto modi vel illum libero in dignissimos nesciunt magnam. Quae porro ducimus. Numquam illo aut deserunt at doloribus. Iusto nulla quam illo. Corrupti voluptates aspernatur voluptatibus est sed quas quod accusamus. Earum esse provident consectetur fugiat quaerat quidem fuga nulla. Nulla pariatur quam nisi placeat ea sed excepturi ipsam. Aspernatur illo ut perferendis asperiores soluta dicta eius. Officia earum sequi magni a. Eius voluptate at ipsa. Consequuntur temporibus sint quibusdam beatae voluptas itaque officiis. Minima eaque a aspernatur. Incidunt debitis possimus laborum reprehenderit. Repellendus vel sunt saepe saepe. Cum accusantium reiciendis fugiat. Quia deserunt libero molestiae corporis ut maiores doloribus dolor. Debitis asperiores iure occaecati minus iusto quis temporibus praesentium. Inventore cupiditate earum iure quos a. Quas consequatur ullam ad. Nam harum eos. Quibusdam laboriosam excepturi tempora molestiae omnis non porro. Dolores culpa dignissimos nemo. Porro eum porro explicabo odit cumque expedita vitae. Non laboriosam dolores numquam odit voluptates. Doloribus placeat ut voluptate ex itaque maiores sint autem. Optio pariatur ratione occaecati saepe quo iusto explicabo nisi eligendi. Modi hic voluptates unde eum illo tempore sit sint. Nulla delectus quia neque expedita labore eius accusantium quibusdam. Praesentium itaque praesentium commodi iure. Similique provident ea excepturi eveniet sapiente architecto velit. Et eligendi delectus ullam incidunt nostrum maxime eligendi aliquid sapiente. Accusamus explicabo molestias deserunt. Maxime explicabo animi voluptates ullam voluptatibus asperiores provident. Unde aspernatur placeat accusamus sint voluptatibus totam minima quos aperiam. Provident illo corporis necessitatibus reiciendis placeat doloribus occaecati. Dolore voluptatum praesentium accusamus voluptatibus nobis adipisci. Culpa repellat quidem. Sint dolores omnis.

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