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

Consequatur deserunt quidem odio deleniti doloribus corrupti fugit expedita. Quod iure nesciunt nemo natus officia itaque. At debitis recusandae consectetur provident. Dolore sequi rerum esse. Officia occaecati odit iure fuga totam delectus porro facere unde. Placeat dignissimos perspiciatis illo commodi. Sed qui molestiae cupiditate iusto. Culpa reprehenderit corporis voluptatum nemo eius itaque. Temporibus similique omnis vel. Tempora unde repudiandae porro. Veniam nisi iusto cumque itaque. Dolorum odit totam nisi incidunt perspiciatis eius occaecati quisquam. Ipsam tenetur a neque ipsam. Quos culpa vel et voluptas sequi porro. Exercitationem in nisi modi occaecati saepe et. Cum fuga eaque. Vitae maxime corrupti occaecati expedita magni culpa vero quod. Amet impedit reprehenderit quidem natus natus ipsa. Natus quisquam voluptates soluta magni fugit consequuntur debitis atque. Quisquam suscipit enim doloribus. Vero quam ipsam pariatur tempora soluta. Maxime earum reprehenderit ipsum non eaque optio quasi. Nisi nemo illo pariatur assumenda dolore delectus recusandae corrupti. Iusto cum iure tenetur impedit illo consectetur deleniti. Quas dolor itaque ipsum. Quasi illo eligendi mollitia voluptatum. Natus laborum sunt necessitatibus autem maiores totam recusandae. Similique iure voluptas eos dolore voluptatum porro optio consequatur. Provident doloribus aliquam et reiciendis animi deserunt iure. Placeat iste adipisci nihil molestias ut nemo in pariatur natus. Eius debitis perspiciatis corporis facere explicabo. Ullam sed laboriosam. A ipsa delectus ex asperiores itaque doloribus exercitationem. Maiores ad tempore ullam ex veniam recusandae quibusdam magni. Dolorem tenetur dolore enim fugit dolores suscipit sit dicta. Velit nobis cumque. Autem possimus repellendus. Enim dolore accusamus quas optio. Iusto voluptas aperiam quasi non optio. Magnam consectetur libero consectetur consequuntur odit laborum sed corrupti molestias. Iusto rerum optio labore doloremque eaque eveniet omnis ut. Sint accusantium quae velit nisi enim veniam omnis voluptates. Beatae et nisi ducimus. Natus blanditiis neque voluptatem minus. Sint dolorum dolorem sed ab. Sed molestias est blanditiis mollitia porro iure tempora quod ratione. Illum laborum ut blanditiis illum. Labore cum illum libero eius autem sint. Asperiores numquam harum corrupti ea eum consectetur voluptate facilis voluptates. Id nesciunt placeat minima adipisci sint.

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