Guide

Tailus does not require any particular configuration which implies that no documentation is needed, but this note guide you to set up your tailwind css project.

This guide will focus on running tailwind css with the CLI, for other use cases please read the official framework documentation.

Vite SvelteKit Nuxt JS Next JS

Install Tailwind CSS

Install tailwindcss and its peer dependencies via npm, and create your tailwind.config.js file.


                                                    
                                                        
                                                        npm install -D tailwindcss postcss autoprefixer
                                                    
                                                    
                                                        
                                                        npx tailwindcss init

Add Tailwind to your PostCSS configuration

Install tailwindcss and its peer dependencies via npm, and create your tailwind.config.js file.

                                                        
module.exports = {
    plugins: {
        tailwindcss: {},
        autoprefixer: {},
    }
}

Configure your template paths

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

                                                        
                                                            
/** @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.


                                                @tailwind base;
                                                @tailwind components;
                                                @tailwind utilities;

Start your build process

Run your build process with npm run dev or whatever command is configured in your package.json file.


                                                    
                                                        
                                                        npm run dev

Start using Tailwind in your HTML

Make sure your compiled CSS is included in the (your framework might handle this for you), then start using Tailwind’s utility classes to style your content.


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