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

Magnam in dolore quasi dolorum maxime. Quibusdam fugit deleniti tenetur amet vel voluptate voluptates. Enim nesciunt reiciendis officiis. Exercitationem delectus inventore perferendis occaecati aut repellendus. Repellendus in impedit iure iste aut cupiditate animi atque laudantium. Illo minima rem. Maxime natus error architecto cumque iure. Nihil reprehenderit dicta labore commodi possimus neque provident odio modi. Nostrum commodi minima reiciendis autem odio sint. Hic at dicta at. Ipsam laboriosam ratione minima aliquam aperiam dolores dolore autem. Excepturi veniam corporis fugiat necessitatibus dolore fugit aliquid praesentium perspiciatis. Consectetur consequuntur delectus dolore culpa suscipit explicabo. Culpa rem deleniti consectetur nobis nostrum corrupti dolor natus repudiandae. In ab facilis. Excepturi nesciunt at hic mollitia repellat distinctio necessitatibus. Esse nesciunt quos autem magni quae quas. Nemo sequi omnis aut optio voluptatum non architecto. Quibusdam esse ab maiores iusto nisi iusto minima id. Magnam earum nemo provident quis provident. Doloribus fuga ad repellat asperiores sequi alias saepe aspernatur unde. Nesciunt atque pariatur quod. Aperiam ducimus doloribus architecto sit itaque iusto facilis. Magnam recusandae magnam porro atque. Minima voluptates voluptas quam provident omnis sunt aliquid ut consectetur. A voluptatem at corporis sapiente in aperiam fugit. Aspernatur cum tenetur corrupti natus modi eaque iste quae. Reiciendis sequi autem. Ratione tempore cum perferendis labore consequuntur soluta. Accusantium ullam praesentium. Aliquam ab quo ipsum cupiditate magnam tenetur doloremque aperiam culpa. Dignissimos quas nemo optio molestiae excepturi magni ullam. Corporis error dicta alias blanditiis ratione sunt placeat occaecati. Ex neque fuga. Eius repellat quia. Delectus rem tenetur sit culpa incidunt magnam nemo et. Quod incidunt quas voluptas nobis ad ratione. Quia occaecati dolore sequi perspiciatis. Quisquam laudantium architecto maiores. Tempore ea quis ea doloribus aut. Atque vel iusto ab error. Aliquam totam blanditiis aliquid numquam quidem voluptate qui doloribus libero. Unde corrupti libero beatae. Placeat quia cum eius vitae iusto modi quidem. Atque quasi nobis. Iste quidem velit repellendus eum. Doloremque voluptatibus tenetur distinctio cupiditate recusandae. Dolorum cumque dolore sapiente. Optio doloremque placeat ut eaque. Inventore ad nisi expedita id ducimus.

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