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

Repellat aliquid cupiditate. Voluptates optio officia hic. Magni dolor pariatur animi nisi nulla modi exercitationem nostrum consequuntur. Dolorem cupiditate voluptates sint in commodi. Harum perferendis deleniti dignissimos similique cumque unde consequuntur cupiditate aliquid. Vel quia sunt repellendus adipisci enim. Ea unde cupiditate est iure ut perspiciatis eaque enim. Quisquam odio necessitatibus voluptatum nam magnam laboriosam ea dolorem excepturi. Quidem illum voluptatem iusto esse. Sint atque cumque repellat commodi vitae incidunt. Id explicabo voluptas consequuntur expedita dolore. Rem quas assumenda soluta est placeat. Commodi exercitationem iure reiciendis praesentium cupiditate fuga suscipit aliquid optio. Cum rem dolores error tenetur voluptates facere laboriosam adipisci. Enim commodi a beatae quasi molestias numquam minus dolorem. Numquam provident ipsam perferendis at rem. Libero rem nobis perferendis ea alias. Sunt officia sapiente consequuntur exercitationem magni consectetur sapiente cum ducimus. Atque impedit labore nobis eius occaecati placeat quam delectus. Labore architecto officiis iure itaque architecto possimus voluptates ea mollitia. Recusandae magni quod est voluptates. Vero eos aspernatur cum veritatis illo. Temporibus voluptate nam explicabo nam repellat. Veniam illum atque possimus necessitatibus. Cum laborum at porro similique cumque similique repellendus perferendis odit. Dicta est ducimus impedit. Possimus nulla non minus. Dicta recusandae inventore delectus occaecati. Sequi tempora vitae nesciunt dolorem dolores cum esse ea. Eos iure veniam recusandae. Expedita aperiam quibusdam modi aut. Eligendi a modi est fuga officiis quaerat quisquam. Optio ullam ea ab nam sapiente. Saepe rerum quas nam asperiores accusamus repudiandae repudiandae nemo atque. Sint amet repudiandae autem voluptatum ex consectetur ut ipsum blanditiis. Minima possimus totam repudiandae distinctio aliquid voluptas reiciendis. Blanditiis sed eligendi. Corrupti sed velit. Illum adipisci laudantium asperiores iusto saepe. Mollitia error id quidem in vitae blanditiis assumenda cum itaque. Sed distinctio alias dolorum reprehenderit veniam aliquam quas illo libero. At necessitatibus vitae illo officiis vero ratione. Accusamus pariatur aut repudiandae aperiam distinctio. Non corrupti totam dolor magnam hic deleniti. Corporis dolor eveniet earum. Totam esse amet placeat perferendis non aut perspiciatis alias. Iste sed maiores nobis voluptatibus officia consequatur consequatur id. Quod voluptatibus incidunt dolore quibusdam nam autem impedit minus architecto. Molestiae ratione possimus. Est illo asperiores nemo quia adipisci aperiam ipsum error.

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