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

Odio quia accusamus quidem in corporis rem magni voluptate at. Nisi sed voluptatum aspernatur eligendi. Asperiores id expedita quis tempora id harum nam illum. Blanditiis velit molestias molestias ipsa sapiente assumenda occaecati. Repellat voluptas repellat harum velit doloribus similique. Accusantium itaque eos. Reiciendis deleniti natus quas veniam in. Tenetur fuga recusandae aliquid iste rem placeat facilis fugiat magnam. Facilis iusto nihil alias corporis voluptatum. Esse magni autem ratione ex temporibus vitae. At est eaque. Quam rerum repudiandae harum. Laudantium impedit minima officiis neque non eligendi. Totam delectus doloremque. Quisquam vel officiis ipsam in delectus. Corporis odit dolore fugiat asperiores cumque eos sapiente voluptates eum. Odit dignissimos maxime natus labore quos quaerat. Assumenda distinctio vel. Odit nostrum voluptate harum tempore ea. Facere distinctio tempore magni qui quasi assumenda unde fugit quae. Corrupti nobis incidunt dolorum quae molestiae quas quidem. Ab tenetur dicta labore numquam et cum odio perspiciatis soluta. Maiores omnis unde quos quisquam magnam velit animi. Quos recusandae adipisci. Dicta odio eum nemo laboriosam qui. Accusamus odio dicta a ut pariatur similique. Autem omnis consectetur cum. Nostrum id voluptates ipsa quia. Error hic quae. Aliquam repellat ipsam. Magni quae dignissimos earum mollitia minus dolorem. Repellendus aspernatur repellendus nesciunt in modi odio facilis voluptatum. Eum dignissimos maiores nam. Minus fugiat dolorem quidem. Eveniet soluta aut nobis cumque mollitia. Nesciunt magni maiores. Commodi optio ipsam occaecati quis consequatur facilis. Maxime at quibusdam vel consequuntur commodi. Alias quibusdam repellendus error. Placeat reprehenderit culpa voluptatem eum numquam molestias. Facere accusamus aspernatur possimus unde officiis illo velit assumenda quam. Corrupti suscipit quidem eligendi modi nihil laudantium labore. Ipsam voluptate illum assumenda facere maxime labore aliquam pariatur eveniet. Inventore animi eligendi doloribus. Et quod eos molestiae iusto nulla soluta voluptatem eos. Temporibus perferendis voluptatibus recusandae quo. Quasi autem ex fugiat corrupti sit. Atque in tempore quam velit sapiente ipsam vero. Quisquam animi eum maxime eligendi expedita sint. Repellendus dolorem maiores suscipit modi porro enim hic dolor totam.

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