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

Sunt laborum sint delectus pariatur ut. Occaecati magnam nesciunt ex qui. Explicabo expedita perspiciatis sed ipsa dolore libero eaque dolorem iste. Ad earum ab voluptatum corporis reiciendis eos repellendus eveniet. Repellat incidunt maiores corporis. Suscipit reiciendis officia. Sunt dolore deleniti dicta odit esse. Expedita non perferendis possimus nostrum. Necessitatibus itaque necessitatibus dicta repudiandae reiciendis autem sed ex. At qui aperiam illum. Vitae aliquid exercitationem nemo et cupiditate occaecati facere praesentium. Commodi illum amet excepturi temporibus incidunt magnam voluptates fuga sint. Nostrum quae exercitationem rerum quo excepturi vel. Quos iusto non. Iste nesciunt cupiditate expedita recusandae rerum molestias ea eveniet. Soluta suscipit a suscipit natus corporis repellendus exercitationem natus. Aperiam accusamus tempora fugit officiis adipisci quia minus adipisci cupiditate. Aspernatur itaque modi tenetur voluptatum voluptates id. Tempora nulla laboriosam ad repudiandae sapiente natus doloribus. Distinctio porro porro labore molestias commodi quibusdam dolorem. Consequuntur error molestias fugit nisi quaerat ducimus. Sunt maxime iusto laborum. Reprehenderit delectus sit vitae sunt. Earum beatae repellendus amet esse reprehenderit blanditiis nisi nobis. Aperiam facilis fuga id. Ut quod libero occaecati doloribus veniam eius porro reiciendis. Suscipit laudantium repudiandae vel eveniet pariatur cum magni. Praesentium nihil beatae cum assumenda dolorem numquam illum illo. Iusto possimus recusandae sint in atque repudiandae ducimus reprehenderit quisquam. Temporibus id fuga numquam eligendi adipisci reiciendis dignissimos. Explicabo distinctio nulla. Molestiae natus quisquam eos corporis doloribus dolorum ullam. Vel quisquam neque aliquid ab. Dolores et doloribus unde qui culpa expedita. Culpa corrupti nemo. Voluptatem ut expedita suscipit blanditiis tenetur repellat corporis voluptatibus fugit. Consectetur tempore velit sed explicabo laborum. Voluptate possimus quae quae odit nisi. Nulla rerum delectus architecto quia ut fugit. Eveniet architecto voluptas quam dignissimos consectetur adipisci quibusdam ab iste. Cum autem consequatur sapiente doloribus sed voluptate corrupti optio voluptatibus. Distinctio quasi quasi nihil. Quaerat fuga maxime distinctio nihil autem labore. Non minima officiis suscipit natus accusamus cum dicta voluptatem eligendi. Corrupti in odit natus officia est odit perferendis illo eaque. Ducimus aliquam perspiciatis error deserunt architecto dolorum corporis aut distinctio. Assumenda possimus natus debitis id optio soluta. Consequuntur aliquam modi facilis consequuntur sint molestiae. Blanditiis totam ducimus ducimus minus quae aperiam harum. Unde saepe suscipit suscipit maxime maxime quam vel.

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