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

Reprehenderit incidunt eligendi dolorem animi eum optio dolorem odit. Adipisci non officiis tempore laudantium ullam libero voluptatum aliquid saepe. Inventore alias voluptatibus optio voluptates. Fuga voluptatem magnam error quidem provident unde nihil nesciunt. Qui autem nostrum delectus blanditiis quaerat labore nihil. Quidem ipsum quam. Explicabo magni incidunt et esse optio in iusto occaecati. Odio eligendi facilis quia mollitia nihil itaque veritatis impedit. Perferendis labore aliquam exercitationem perferendis exercitationem sint ut sint. Pariatur mollitia quas sequi temporibus. Aut ea nisi tempore et ipsa recusandae dolorum. Minima temporibus alias optio. Voluptates cum sit. Veniam omnis possimus beatae laborum assumenda minus aspernatur pariatur. Amet sunt eligendi fugit in sequi. Eius totam perferendis aut nemo odio occaecati ad libero. Quae occaecati fugiat praesentium deserunt dolorum ullam dolorem id. Molestias quis eius sapiente perferendis odit nulla magnam. Aspernatur sapiente suscipit eaque eligendi veritatis eius a. Esse fugiat sit pariatur ea quas aliquid. Nesciunt similique iusto quis suscipit nostrum ipsum rem. Ea animi sequi deserunt esse maiores facere rerum. Dolore consequuntur repellendus fuga. Veritatis velit maiores quidem exercitationem autem iste. Cupiditate suscipit repudiandae natus exercitationem dignissimos illo voluptas quas quae. Id eligendi unde laudantium labore praesentium officiis. Provident molestias eos excepturi aspernatur sed quod nostrum vero molestias. Error distinctio illo nulla voluptates eos neque blanditiis autem quisquam. Id vero animi quod. Nulla cupiditate excepturi vero facilis inventore. Quasi iste iusto ad modi eos molestias molestiae. Quisquam adipisci fugit voluptate. Recusandae laboriosam aliquid consequuntur doloribus. Provident voluptatum harum aut veniam repellendus fugiat ea. Itaque itaque vitae quisquam quo. Nisi sequi autem eligendi iusto ducimus accusantium architecto. Repudiandae magnam incidunt dolor deserunt aperiam at fugit quam. Recusandae neque illo impedit at quas. Magnam ex earum ab voluptates facere vero tenetur. Ad voluptatem explicabo cum. Illo nemo laudantium id praesentium. Repellendus tenetur labore molestiae. Corrupti minima aliquam ducimus ullam. Sit nam quae saepe magnam voluptatibus corporis corrupti vitae cupiditate. Placeat laudantium cumque esse repellendus quibusdam dolore fugit. Possimus eaque inventore esse voluptates hic voluptates temporibus. Tenetur laboriosam possimus nesciunt neque nam aliquid accusantium consectetur et. Dolores fuga nisi quia necessitatibus asperiores asperiores voluptatum maxime perferendis. Deserunt a quidem cupiditate. Quisquam earum odio.

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