Installation

Get started with Tailwind CSS

Tailwind CSS works by scanning all of your HTML files, JavaScript components, and any other templates for class names, generating the corresponding styles and then writing them to a static CSS file.

It’s fast, flexible, and reliable — with zero-runtime.

Installation

Play CDN

Use the Play CDN to try Tailwind right in the browser without any build step. The Play CDN is designed for development purposes only, and is not the best choice for production.

  1. Add the Play CDN script to your HTML

    Add the Play CDN script tag to the <head> of your HTML file, and start using Tailwind’s utility classes to style your content.

    index.html

    1. <!doctype html>
    2. <html>
    3. <head>
    4. <meta charset="UTF-8">
    5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6. <script src="https://cdn.tailwindcss.com"></script>
    7. </head>
    8. <body>
    9. <h1 class="text-3xl font-bold underline">
    10. Hello world!
    11. </h1>
    12. </body>
    13. </html>
  2. Try customizing your config

    Edit the tailwind.config object to customize your configuration with your own design tokens.

    index.html

    1. <!doctype html>
    2. <html>
    3. <head>
    4. <meta charset="UTF-8">
    5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6. <script src="https://cdn.tailwindcss.com"></script>
    7. <script>
    8. tailwind.config = {
    9. theme: {
    10. extend: {
    11. colors: {
    12. clifford: '#da373d',
    13. }
    14. }
    15. }
    16. }
    17. </script>
    18. </head>
    19. <body>
    20. <h1 class="text-3xl font-bold underline text-clifford">
    21. Hello world!
    22. </h1>
    23. </body>
    24. </html>
  3. Try adding some custom CSS

    Use type="text/tailwindcss" to add custom CSS that supports all of Tailwind’s CSS features.

    index.html

    1. <!doctype html>
    2. <html>
    3. <head>
    4. <meta charset="UTF-8">
    5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6. <script src="https://cdn.tailwindcss.com"></script>
    7. <style type="text/tailwindcss">
    8. @layer utilities {
    9. .content-auto {
    10. content-visibility: auto;
    11. }
    12. }
    13. </style>
    14. </head>
    15. <body>
    16. <div class="lg:content-auto">
    17. <!-- ... -->
    18. </div>
    19. </body>
    20. </html>
  4. Try using a first-party plugin

    Enable first-party plugins, like forms and typography, using the plugins query parameter.

    index.html

    1. <!doctype html>
    2. <html>
    3. <head>
    4. <meta charset="UTF-8">
    5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6. <script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio,line-clamp"></script>
    7. </head>
    8. <body>
    9. <div class="prose">
    10. <!-- ... -->
    11. </div>
    12. </body>
    13. </html>

Get familiar with some of the core concepts that make Tailwind CSS different from writing traditional CSS.

  • Utility-First FundamentalsPlay CDN - 图1

    Using a utility-first workflow to build complex components from a constrained set of primitive utilities.

  • Responsive DesignPlay CDN - 图2

    Build fully responsive user interfaces that adapt to any screen size using responsive modifiers.

  • Hover, Focus & Other StatesPlay CDN - 图3

    Style elements in interactive states like hover, focus, and more using conditional modifiers.

  • Dark ModePlay CDN - 图4

    Optimize your site for dark mode directly in your HTML using the dark mode modifier.

  • Reusing StylesPlay CDN - 图5

    Manage duplication and keep your projects maintainable by creating reusable abstractions.

  • Customizing the FrameworkPlay CDN - 图6

    Customize the framework to match your brand and extend it with your own custom styles.