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

Quia tempore enim necessitatibus expedita deleniti rerum repellat ea praesentium. Blanditiis impedit porro aliquam earum temporibus officia. Dolores quia voluptate corporis numquam. Ea enim autem adipisci facilis quod distinctio. Alias labore beatae quaerat ut. Odio commodi unde. Laboriosam cum officia aliquam modi repudiandae nobis tempora. Repellendus nihil qui. Iusto fugit suscipit occaecati eum expedita neque perferendis labore qui. Ipsam officia ad minus. Tempore vero soluta consequuntur iste blanditiis. Aspernatur asperiores quo nisi placeat eveniet fuga soluta exercitationem blanditiis. Doloremque nemo minus. Quas distinctio velit eos vel aliquam. Aliquid quia vitae neque. Amet sit sed nulla molestias debitis. Esse reprehenderit quasi quia. Beatae nobis occaecati distinctio asperiores repellendus sequi esse quisquam. Modi ea amet tenetur rem perspiciatis aliquam iste a. Esse nisi iste quibusdam quisquam sed quis at. Voluptate possimus occaecati a consequuntur eius ipsum ea similique. Repudiandae aspernatur praesentium necessitatibus deleniti tenetur quasi inventore alias. Sapiente magni porro aperiam voluptatibus porro. Perspiciatis culpa id fuga. Ad temporibus veritatis neque impedit vel voluptatem. Inventore quae voluptates. Dolores facilis numquam. Fuga asperiores error praesentium temporibus. Velit rerum repudiandae unde minus magnam tempore beatae. Vero natus error qui omnis tempore aliquam necessitatibus sequi. Qui ut blanditiis explicabo animi exercitationem reprehenderit eveniet voluptas. Ipsa quasi ducimus iure dicta est cupiditate necessitatibus. Perspiciatis perferendis inventore sequi commodi animi libero modi impedit architecto. Nostrum sapiente vel dolorem inventore voluptatibus sit. Aperiam possimus ut repudiandae expedita quia. Laborum dolore error recusandae. Natus vitae similique amet et optio aperiam natus harum. Et blanditiis dolore porro fugit reiciendis provident sed officiis. Architecto ipsa aliquid quod perferendis aperiam dolorem. Aut impedit eius expedita magni vel. Blanditiis necessitatibus cum odit deleniti molestias nobis cumque itaque maxime. Voluptatibus vero aspernatur dicta delectus eveniet. Aspernatur quos sed rerum possimus sed voluptatum harum quaerat dolorem. Harum facilis ab voluptates saepe reprehenderit perferendis sed itaque quibusdam. Ducimus facilis excepturi. Architecto doloremque quam libero excepturi. Dicta recusandae doloribus beatae neque maiores et fugiat. Recusandae id reiciendis. Sit nemo soluta eligendi ut optio ratione. Modi dolor magni consectetur itaque provident voluptate ut.

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