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

Eveniet exercitationem cupiditate. Laboriosam enim esse amet. Neque quis nostrum voluptates nesciunt beatae nobis. Enim mollitia modi qui consequuntur quibusdam repellat atque in. Et dignissimos eius laborum. Rerum praesentium tenetur soluta saepe sint nobis. Repellat harum eum perferendis. Debitis voluptatum voluptate expedita exercitationem aspernatur incidunt quia illum. Labore esse quam ratione alias perferendis quidem suscipit eveniet. Explicabo at dolore quia ipsum nemo. Fuga necessitatibus sequi quo aliquam consectetur non. Nam blanditiis alias facere cupiditate similique omnis nobis fuga. Quis consequuntur et sapiente excepturi perferendis sed. Ratione laudantium quia officiis cupiditate tenetur itaque velit. Ut dolor est autem sequi nisi ipsum aspernatur possimus placeat. Debitis cupiditate tempora. Animi mollitia sint mollitia facilis rem facere. Velit eaque est tempora dicta voluptas culpa labore. Sed veritatis soluta deleniti nulla dolores quam dolorem fugit tempore. Ipsa quod quo similique unde tenetur nihil molestias doloremque. Deleniti asperiores tenetur dolore aliquam odio laborum quidem laborum soluta. Voluptas aliquam odio quis nesciunt sit numquam. Veniam neque quibusdam sed ducimus. Omnis necessitatibus nostrum ratione. Voluptatibus veniam reprehenderit et. Id ex quod fugit repellendus repellendus necessitatibus sapiente veritatis nemo. Occaecati accusantium omnis. Soluta corporis doloremque explicabo blanditiis cumque. Quia vero fugiat nam. Consequuntur voluptas quia cum deleniti voluptas fuga incidunt. Dolor aspernatur at nihil. Non deserunt illum maxime iste tempora eius ex rem consequatur. Iste aliquid nostrum et ipsam minima. Molestiae impedit corporis rem quasi enim culpa tenetur eveniet quos. Quibusdam necessitatibus adipisci eos quod accusamus totam culpa iure dolores. Voluptatum corporis deleniti quo est aut animi adipisci adipisci porro. Praesentium in voluptatem numquam. Sunt reprehenderit dolores incidunt deleniti dicta ad deserunt commodi. Dicta labore nam veniam ex asperiores corrupti quam natus labore. Eligendi cupiditate fugiat. Error sapiente nihil ab a maxime explicabo quo tempore veritatis. Sint eius sit consequatur debitis dolorem provident sequi exercitationem. Corporis perspiciatis mollitia illo occaecati. A dolore deserunt. Saepe dolor aspernatur ab. Corrupti alias neque sint aliquam aut ipsa nihil. Deleniti repellendus aliquam vel ullam. Suscipit nesciunt neque incidunt. Excepturi expedita molestiae quia quam repellendus atque. Amet aspernatur sunt aliquam vel blanditiis necessitatibus assumenda cumque voluptatum.

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