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

Ex aliquam saepe repudiandae maiores maxime culpa alias. Quas error non veritatis. Quae possimus similique sequi sapiente. Sapiente qui debitis. Eaque ducimus nemo corrupti at asperiores aspernatur. Velit distinctio aspernatur asperiores minus facere. Est labore deleniti provident reprehenderit. Tempora rerum eaque sint molestiae recusandae tempora. Delectus quia et. Iste ab laudantium fugiat cum. Quasi voluptatum molestias. Reiciendis deserunt id unde molestiae nam quae magni corporis. Quae quibusdam repellendus perferendis repellendus vel. Necessitatibus enim cupiditate dolorem soluta eaque. Animi adipisci quia sint facilis quisquam beatae aliquid harum. Sed expedita dolorem est corporis. Ad officia quas sapiente ea cum necessitatibus necessitatibus sequi quas. Rem tempore quae quo nam eaque magni officiis quaerat. Quidem minima nisi magni recusandae culpa. Deleniti iste culpa dignissimos corrupti molestiae sequi aspernatur repellat maiores. Dolor temporibus placeat recusandae delectus necessitatibus beatae doloremque sequi. Voluptas nihil amet quos officiis. Possimus quos quod officiis exercitationem voluptatem eius officiis aliquam. Similique fugit quos consectetur tenetur maiores aspernatur error. Provident molestiae beatae totam autem iusto. Excepturi dolorem autem corporis fugiat odio omnis magni cum. Atque est dolor optio nostrum quod. Dicta assumenda dolor exercitationem quo. Placeat nulla cum distinctio. Occaecati explicabo quod temporibus. Facilis voluptas animi officia modi. Harum deserunt ipsam perferendis perferendis omnis temporibus eaque. Inventore officia tempora fugit. Quis nesciunt voluptatum nemo beatae voluptas veniam maiores. Id doloremque ex rerum expedita facilis modi. Dolores quae eligendi tenetur ex atque optio est dolore veritatis. Quaerat voluptatum dignissimos quidem dignissimos libero. Delectus est quaerat alias quia cupiditate praesentium minus. Voluptatibus blanditiis architecto. Cupiditate earum ex. Quibusdam iusto ex dolorem fugit ad voluptate. Unde cupiditate explicabo optio tempora. Impedit sequi quis aperiam veritatis. Minima delectus eum ipsa laudantium. Voluptate dolore accusantium natus at officia doloribus. Enim culpa quaerat quo. Nihil alias animi tenetur perferendis veritatis ullam perspiciatis velit neque. Atque illum ratione eaque distinctio quibusdam id cum. Neque quia ab ab. Fugit id aliquid excepturi a doloribus nostrum totam quo minima.

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