Tocinocode - Install Tailwind CSS

Get started with Tailwind CSS

Tailwind CLI
Play CDN

The simplest and fastest way to get up and running with Tailwind CSS from scratch is with the Tailwind CLI tool. The CLI is also available as a standalone executable if you want to use it without installing Node.js.

Install Tailwind CSS

Install tailwindcss via npm, and create your tailwind.config.js file.
Terminal
```
npm install -D tailwindcssnpx tailwindcss init
```

Configure your template paths

Add the paths to all of your template files in your tailwind.config.js file.

tailwind.config.js

/** @type {import('tailwindcss').Config} */
        module.exports = {
          content: ["./src/**/*.{html,js}"],
          theme: {
            extend: {},
          },
          plugins: [],
        }

Add the Tailwind directives to your CSS

Add the @tailwind directives for each of Tailwind’s layers to your main CSS file.
src/input.css
```
@tailwind base;
        @tailwind components;
        @tailwind utilities;
```
Start the Tailwind CLI build process

Run the CLI tool to scan your template files for classes and build your CSS.
Terminal
```
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch
```

Start using Tailwind in your HTML

Add your compiled CSS file to the <head> and start using Tailwind’s utility classes to style your content.

src/index.html

<!doctype html>
        <html>
        <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <link href="/dist/output.css" rel="stylesheet">
        </head>
        <body>
          <h1 class="text-3xl font-bold underline">
            Hello world!
          </h1>
        </body>
        </html>

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.

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

<!doctype html>
                    <html>
                    <head>
                      <meta charset="UTF-8">
                      <meta name="viewport" content="width=device-width, initial-scale=1.0">
                      <script src="https://cdn.tailwindcss.com"></script>
                    </head>
                    <body>
                      <h1 class="text-3xl font-bold underline">
                        Hello world!
                      </h1>
                    </body>
                    </html>

Try customizing your config

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

index.html

<!doctype html>
        <html>
        <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <script src="https://cdn.tailwindcss.com"></script>
          <script>
            tailwind.config = {
              theme: {
                extend: {
                  colors: {
                    clifford: '#da373d',
                  }
                }
              }
            }
          </script>
        </head>
        <body>
          <h1 class="text-3xl font-bold underline text-clifford">
            Hello world!
          </h1>
        </body>
        </html>

Try adding some custom CSS

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

index.html

<!doctype html>
        <html>
        <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <script src="https://cdn.tailwindcss.com"></script>
          <style type="text/tailwindcss">
            @layer utilities {
              .content-auto {
                content-visibility: auto;
              }
            }
          </style>
        </head>
        <body>
          <div class="lg:content-auto">
            <!-- ... -->
          </div>
        </body>
        </html>

Try using a first-party plugin

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

index.html

<!doctype html>
        <html>
        <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio,line-clamp"></script>
        </head>
        <body>
          <div class="prose">
            <!-- ... -->
          </div>
        </body>
        </html>

Install Tailwind CSS

Configure your template paths

Add the Tailwind directives to your CSS

Start the Tailwind CLI build process

Start using Tailwind in your HTML

Play CDN

Add the Play CDN script to your HTML

Try customizing your config

Try adding some custom CSS

Try using a first-party plugin