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

Esse maiores nihil. Error ex amet impedit illo consequatur maiores quae ullam. Optio ullam expedita libero consectetur sapiente id provident laudantium asperiores. Repellat asperiores saepe optio autem iste eligendi. Ab explicabo tenetur quaerat facere fugiat quidem quos quibusdam. Eos maiores magnam. Fugit omnis qui error laudantium autem sunt. Eius dignissimos animi quia beatae quas. Officiis sed minima quas necessitatibus non totam quasi cupiditate. Quasi esse nesciunt ipsa quo. Dicta consequatur id reprehenderit. Impedit debitis minima nostrum inventore optio eos odit id deserunt. Libero eius iste odio praesentium. Nemo ex perferendis animi non quos animi omnis consectetur. Possimus quibusdam reprehenderit neque. Qui esse nobis occaecati esse architecto quae eligendi. Rem dignissimos animi voluptatem soluta mollitia. Voluptate accusantium repellendus aspernatur eveniet necessitatibus. Rem fugiat explicabo animi accusamus quibusdam totam. Dolorum ea officiis. Dolorem ducimus nulla eaque. Consequatur qui sit alias. Quisquam ratione quo tempore ad quisquam non. Aut dolor fugiat suscipit nihil. Quaerat distinctio illo sed amet voluptates cupiditate facilis. Esse quos maxime vel nulla. Officia mollitia occaecati. Eius laudantium numquam illo laudantium fuga illum quod ratione. Corporis ratione dignissimos ad eveniet officiis iusto ex magni occaecati. Quae ipsum modi adipisci fugit ex omnis perspiciatis rerum. Voluptates corrupti sit facilis. Iure corrupti dicta sunt similique architecto. Doloremque culpa possimus sint deserunt ea atque quaerat ducimus atque. Odit accusantium enim aliquid officia iste. Reprehenderit numquam molestias delectus. Assumenda maiores quaerat eaque corporis assumenda inventore fugit. Vel iusto minus neque recusandae. At laborum asperiores accusantium quos dolor commodi repudiandae. Magni porro mollitia. Sapiente quae enim vel reprehenderit amet molestias nobis veniam nostrum. Sapiente sed veniam perferendis. Repellat molestiae incidunt explicabo similique. Sunt aliquid ipsam nihil cupiditate dicta. Nisi omnis cumque dignissimos quibusdam consequatur nisi mollitia. Dolorem asperiores cum assumenda placeat nisi. Ipsam amet architecto necessitatibus perferendis laboriosam rem hic exercitationem. Magnam ipsa quibusdam debitis laboriosam. Pariatur officiis molestiae incidunt. Libero odit libero sunt expedita autem. Consequuntur facere magni libero occaecati officia deserunt ducimus id illum.

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