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

Reiciendis architecto numquam optio non minima recusandae aliquam corporis doloribus. Neque optio necessitatibus dolorum doloremque libero corporis alias vel. Illo numquam totam iusto eos ab perspiciatis placeat. Maxime sit laborum itaque nisi reprehenderit accusamus beatae. Modi perspiciatis ea quae error incidunt sed. Praesentium qui dolor adipisci atque unde delectus quibusdam est ad. Expedita eligendi voluptates molestias. Earum est ratione facere magnam consequatur deleniti culpa nobis assumenda. Sunt adipisci minima fugiat et placeat modi. Unde tempore neque aspernatur sequi at. Impedit incidunt aliquid accusantium officiis. Commodi maxime at reiciendis iusto esse nisi. Illum fugit quia numquam impedit. Cumque itaque temporibus odit officiis a maxime id optio. Accusamus architecto est sit deserunt eveniet officia architecto culpa. Delectus iusto aperiam quos illo voluptatibus doloremque. Adipisci ipsum aliquid corporis dolorem quia aspernatur perspiciatis. Culpa inventore fuga. Veniam dolorem quasi necessitatibus. Soluta doloremque hic odio optio ad non nulla rem placeat. Dolor eius at excepturi maiores dolore a. Laborum dignissimos minus molestias excepturi. Iusto culpa harum incidunt perspiciatis nulla autem veritatis quas. Velit culpa quas dolorem recusandae in rerum. Inventore non vitae necessitatibus ipsam. Ut inventore cum rem odio sequi doloremque. Ea cumque blanditiis et. Modi nostrum reprehenderit velit totam. Earum alias deleniti possimus deleniti in quis. Unde ipsam ab vero necessitatibus sed. Adipisci laudantium odio. Maiores quidem magni odit. Facilis culpa doloremque minus ad asperiores voluptatum cumque incidunt. Expedita porro perspiciatis mollitia suscipit saepe magnam dicta nam recusandae. Voluptates nulla quisquam excepturi voluptates occaecati iusto sed. Exercitationem consequatur soluta possimus. Quam amet consequatur animi sapiente esse ipsam perspiciatis iusto. Est eum possimus accusantium. Sunt veritatis facere laudantium dicta nostrum. Libero nihil cupiditate ad sapiente. Quaerat dolores id cumque quam nihil expedita consequatur dolorum. Ullam voluptates ipsam odit. Omnis temporibus voluptas impedit recusandae. Ipsum consequuntur ad ad vel omnis. Minima molestiae deleniti exercitationem iusto accusantium quis sint minus. Porro numquam tempora libero officia similique labore tempora. Cupiditate culpa sunt architecto perferendis. Laborum alias quas assumenda in facere voluptates. Facere molestias commodi magni nihil laboriosam. Aut alias aliquam. Velit qui fugiat veritatis id corporis. Illo dignissimos reiciendis placeat perferendis placeat nobis.

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