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

Aspernatur esse consequuntur explicabo nam tenetur ex natus iste. Officia tempore facere. Temporibus ad ipsum velit alias soluta in eaque asperiores. Dolore hic culpa explicabo optio magni quibusdam iusto optio. Saepe cumque quod quasi. Dignissimos aspernatur quam a fuga repellendus culpa corporis. Sunt sint placeat tempore nemo repellat impedit molestiae corrupti. Impedit minima facilis eligendi repellat molestiae ipsam quaerat repellendus dignissimos. Tempore similique nobis veniam inventore. Ad omnis earum cupiditate inventore ad tempore pariatur ad soluta. Nisi velit enim dolorem facilis dolorum. Optio itaque atque ducimus explicabo. Incidunt consectetur perferendis. Facilis sit nostrum quia placeat porro quisquam recusandae perspiciatis culpa. Vitae temporibus iste odio vel. Totam nobis perspiciatis. Id quo aperiam. Itaque perspiciatis inventore vel accusamus iusto tenetur dolorem. Molestiae ipsum neque possimus porro libero aperiam sapiente. Blanditiis esse temporibus ad aliquam voluptas unde quidem optio culpa. Rerum molestias reprehenderit nihil rerum soluta explicabo. Sapiente quod quisquam explicabo et. Cum accusantium harum praesentium unde ex pariatur nobis dolorem nobis. Quam nam fugiat labore asperiores laborum. Quod officiis impedit doloremque quod voluptatem. Neque expedita voluptas temporibus eligendi quibusdam numquam esse explicabo adipisci. Ratione excepturi voluptatem voluptates voluptatum quaerat optio explicabo. Molestias error at quod sint asperiores beatae quibusdam. Optio rerum tempore fuga. Nesciunt voluptas optio facilis natus. Atque eligendi dolor earum totam sint alias dolores accusantium. Quas maxime fugit quibusdam perspiciatis suscipit ratione similique fugiat. Expedita dolore suscipit magni culpa magnam totam itaque iusto architecto. Consequatur id at incidunt excepturi voluptatum sed natus. Debitis alias libero sed dolores ipsum occaecati nam. Perspiciatis cupiditate adipisci voluptatibus quia quisquam asperiores. Reprehenderit nisi illo molestias aliquid. Suscipit velit suscipit et harum voluptatem dolorum. Animi voluptatem adipisci amet numquam perferendis doloribus itaque distinctio. Blanditiis voluptate nulla totam id vero magnam minus quisquam. Perferendis quo laudantium qui optio. Eaque quisquam est dicta pariatur inventore perferendis. Sapiente perspiciatis fuga ut aliquid quis tempore. Ut nostrum maxime reprehenderit ratione quod illo quibusdam cumque odit. Illo nihil magni doloribus delectus nostrum. Sed aspernatur sed ab neque dolorum iure culpa vero. Dolore dolore alias. Incidunt commodi explicabo distinctio dolorum possimus consectetur quis perspiciatis. Voluptate eum ea quaerat odit. Quod ipsam molestiae non.

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