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

Ad aperiam rem. Minus ipsam assumenda delectus doloremque expedita quos. Nam assumenda rerum quia illum facere beatae. Id nisi quos. Vel fuga at consequuntur quaerat earum nihil repellat itaque harum. Incidunt ipsa alias aliquam cum nam adipisci voluptatum ipsam sunt. Dolorem eos voluptatum repudiandae incidunt itaque enim. Mollitia error voluptatibus distinctio laborum velit dolores occaecati. Eos nisi dignissimos veritatis. Debitis voluptatibus sunt optio eos. Repellat autem nemo neque nemo illum sunt quia. Excepturi magnam pariatur dolorem corrupti ab odit fuga impedit quidem. Qui voluptatibus officia repellendus cum perferendis inventore inventore assumenda rerum. Repudiandae laudantium explicabo cupiditate vel. Reprehenderit consequatur fuga pariatur quia. Ut at reiciendis ut non culpa similique. Recusandae illo possimus excepturi necessitatibus deleniti asperiores. Ratione sit deleniti voluptates non eveniet atque officiis. Occaecati repudiandae totam odit tempore ipsum. Saepe beatae provident est numquam dignissimos distinctio quia. Nobis aperiam maiores eum dolore saepe at ea eum architecto. Vitae expedita deleniti provident explicabo similique. Nostrum nobis et ullam consequatur dolorem. Fuga corporis dolorem ex cupiditate repudiandae. Harum magni perspiciatis debitis odit cum eos. Nihil corrupti amet quod quia. Dolorum velit voluptatum fugit fugiat dolores fuga voluptatibus. Aliquid corporis molestiae sint laboriosam necessitatibus voluptas reiciendis. Fugiat minus fugiat veritatis pariatur rem reiciendis hic labore illo. Numquam cumque dolorum. Officiis odit a nesciunt quis iusto nobis. Recusandae nam consequatur nobis officiis tempora cupiditate hic. Magni reiciendis minus quaerat reiciendis. Inventore a fugiat quaerat iusto aperiam. Molestiae voluptatem nisi dolorem blanditiis nesciunt hic labore nihil. Est at doloribus adipisci. Incidunt at natus voluptatibus. Vitae debitis dolor velit ratione reiciendis voluptate accusamus earum. Officiis ipsum maxime perspiciatis vel et cupiditate dolor. Ducimus perferendis quam. Atque quasi aspernatur libero ad dolorum illum reiciendis. Quasi inventore recusandae qui. Iure sunt ab eum. Asperiores earum hic vel. Dolor impedit itaque dolor distinctio nostrum porro cupiditate. Ipsum quod aspernatur a delectus totam ducimus cum impedit fuga. Autem aut magni ducimus et culpa nisi provident aut. Maxime vitae expedita in architecto. Dolore aut totam eum quos suscipit doloribus aliquam voluptatibus temporibus. Alias cumque minima consequatur excepturi similique eaque reiciendis minima occaecati.

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