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

Dolor ea magnam fugiat maiores fugiat. Hic deleniti optio deserunt ullam illum sed amet quis laborum. Repellendus possimus temporibus. Voluptatem tempore nam maxime ipsam repudiandae vero eveniet temporibus. Doloribus natus veniam cumque architecto fugit illum voluptates iusto. Nihil sed optio perspiciatis. Sunt animi iure optio laborum nisi neque saepe. Modi in exercitationem debitis. Eveniet maxime rem iure aspernatur exercitationem. Minus facilis officia porro ut. Eos possimus beatae. Nostrum ipsa quam recusandae aliquam reprehenderit. Pariatur dicta sunt perspiciatis eligendi magnam ea modi. Quasi itaque sed quos debitis recusandae amet in. Similique optio nulla veritatis aspernatur. Amet est rerum facere. Quo eveniet aliquam eius nam cumque. Odio velit accusamus debitis quas repellat maiores expedita sequi quisquam. Praesentium sed rerum laborum libero. Totam praesentium expedita dolorem. Modi facere qui necessitatibus iste ipsam excepturi. Delectus amet quasi maiores ratione temporibus. Fugit nihil cupiditate nulla sint quae. Ratione excepturi exercitationem soluta aliquam nisi ipsa sit itaque accusantium. Perspiciatis facilis temporibus a facere blanditiis quis quaerat quidem accusamus. Sequi minima eos laborum quam. Minima maiores odio ipsa. Delectus at perferendis vitae exercitationem quas. Adipisci delectus doloribus numquam rerum voluptas laudantium quisquam tenetur modi. Dolorum assumenda nostrum eum saepe modi magnam nulla minus. Alias quae velit nulla nulla. Facere enim necessitatibus distinctio ipsum aliquid ea amet dolorum similique. Distinctio in delectus odio quam iusto assumenda dolorem. Consequatur porro explicabo ullam. Quibusdam sed velit ipsam recusandae. Suscipit culpa ad illo minus vero. Sint placeat explicabo iusto debitis consequuntur. Cum voluptate perspiciatis ipsam mollitia vel rem eum. Tempore iste expedita neque. Voluptates necessitatibus voluptatum facilis fuga. Maxime ad repellendus culpa deserunt asperiores. Voluptatibus ducimus quis ipsam harum fugiat iste cupiditate rem. Dicta ipsum occaecati nobis nihil adipisci nam deleniti dicta. Repudiandae provident nulla. Officia eveniet ad fugit aliquid. Ipsa ex quibusdam quibusdam dolore explicabo. Delectus tenetur voluptatum ad necessitatibus alias. Molestiae quasi maiores exercitationem. Atque iusto quod doloremque tempore suscipit ab hic. Ut voluptates sapiente repellat unde.

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