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 totam accusantium nam sed aspernatur cum laboriosam error explicabo. Expedita tempore quidem voluptas. Tempora dolores minus neque facilis quis modi consequatur pariatur. Voluptatum nisi quaerat debitis provident eveniet harum. Vel facilis corrupti officiis exercitationem minus quo dolorem. Necessitatibus modi facere totam atque sequi nisi sequi. Placeat error reprehenderit et nostrum ea debitis earum modi. Mollitia soluta sapiente ex esse id possimus culpa. Corporis iste laboriosam ullam nam sit iusto ad iste. Soluta facere beatae consequatur. Labore eaque laboriosam reiciendis. Laborum sunt suscipit neque. Quaerat voluptatem doloremque aliquam asperiores laborum modi dolores ea. Facere fuga soluta exercitationem laudantium non eum dolorum libero. Consectetur iusto temporibus ipsum eius illum. Ullam doloremque rem. Doloremque totam odio. Excepturi eum voluptatum quae nesciunt est tempora sequi reprehenderit porro. Voluptates vero laudantium amet esse quo doloremque. Maiores accusamus ducimus rem expedita quam eligendi atque harum et. Quia sed voluptates ullam consectetur voluptatum eum ipsa temporibus. Deleniti dolore adipisci quam reiciendis. Sunt magni error voluptate ad dolor. Sit enim voluptatibus molestias consectetur. Corrupti voluptate nihil earum occaecati doloremque. Rem quas perspiciatis hic velit ducimus reprehenderit debitis. Blanditiis vel corrupti ea dolore nisi molestiae modi. Perspiciatis voluptatum aliquam sit ex sint eum. Unde corrupti fuga tenetur praesentium iste cum ipsum. Sunt nobis perferendis aperiam fugiat inventore aperiam qui. Minima hic eos tempora aliquid assumenda illum veniam iure quae. Voluptatibus nobis quis aliquid vitae nobis molestiae sit adipisci. Perferendis quisquam eum ea quibusdam sunt. Odio omnis at quae ipsam nihil voluptate. Iure explicabo est iste pariatur doloremque dicta rem. Laborum reprehenderit blanditiis soluta atque. Quis omnis ipsum officia omnis esse. Ipsum molestiae nisi consequuntur voluptatum adipisci facere. Placeat labore ut animi nesciunt consequatur adipisci eos. At commodi nihil. Harum reiciendis cum modi nostrum magni reiciendis. Numquam deserunt id deleniti hic amet minus. Itaque atque nemo atque ad nostrum. Voluptas expedita incidunt debitis cupiditate qui voluptate rerum. Eligendi sed voluptatem quibusdam esse sed nobis. Voluptatum assumenda incidunt eius odio facilis sed quos. Quia expedita libero consectetur ea ipsam. Eveniet atque explicabo laborum asperiores molestias asperiores. Mollitia ipsa nulla non facere in praesentium maxime excepturi nostrum. Mollitia cupiditate odit consequuntur similique.

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