Tailwind

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

Tailwind CLIUsing PostCSS

1. Install Taimodule CSS

Install `tailwindcss` via npm, and create your 'tailwind.config.js' file.

Terminal

npm install -D tailwindcss

npx tailwindcss init

2. Configure your template paths

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

index.html 

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

3. 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;

4. tart the Tailwind CLI build process

Run the CLI tool to scan your template files for classes and build your CSS.

Terminal

npx tailwindcss -i ./input.css -o ./dist/output.css --watch

5.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.

index.html

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

1. Install Tailwind CSS

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

Terminal

npm install -D tailwindcss postcss autoprefixer

npx tailwindcss init

2. Add Tailwind to your PostCSS configuration

Add `tailwindcss` and `autoprefixer` to your`postcss.config.js`file, or wherever PostCSS is configured in your project.

postcss.config.js 

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

3. 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: ["./**/*.{html,js}"],
    theme: {
      block text-sm extend: {},
    },
    plugins: [],
  }

4. Add the Tailwind directives to your CSS

Add the `@tailwind`directives for each of Tailwind’s layers to your main CSS file.

main.css

@tailwind base;

@tailwind components;

@tailwind utilities;

5. Start your build process

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

Terminal

npm run dev

6.Start using Tailwind in your HTML

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

index.html

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

Copyright 2023 © Dexo theme by pixelstrap

Hand crafted & made with

Customizer
  • Template Mode
    Choose template mode dark & light
  • Layout Type
    Choose layout Ltr & Rtl
  • Sidebar Type
    Choose Sidebar icon & full