How to use Tailwind.css in Magento 2

Tailwind CSS scans all your html files, templates files and JavaScript components for class names and in result it generates corresponding styles and then write it down in output file that is the static file which contains the CSS from the listed templates.

Work with Tailwind CSS from scratch via CLI command:

Install the npm and set up its environment. Then install the Tailwind CSS via cmd line:

npm install -D tailwindcss

Now check the presence of Tailwind in your environment via cmd line :

Start your headless eCommerce
now. Find out More

npm info tailwindcss version

Above command will give you the stable version of installed Tailwind CSS.

Now how to use the Tailwind in custom plugin in magento.

Create a custom module in Magento 2. After that create the configuration file for tailwind inside in the js directory for any scope. This can be achieved via command line.

npx tailwindcss init app/code/Webkul/TailwindTest/view/frontend/web/js/tailwindcss-config.js

This will create the tailwindcss-config.js file in JS directory in front-end scope.

This file provides the path of the templates files for content key:

Now manage the classes in the template files :

<h1 class="text-3xl font-bold underline">
    Hello world!
</h1>
<br>
<button class="text-white font-semibold bg-blue-500 hover:bg-blue-700
               border-blue-700 border-b hover:border-indigo-900 
               transition-all px-6 py-2 rounded-full">
  Click To Wonder!
</button>
<br><br><br>
<h1 class="text-3xl font-bold underline">
    Content Display
</h1>
<figure class="md:flex bg-slate-100 rounded-xl p-8 md:p-0 dark:bg-slate-800">
  <img class="w-24 h-24 md:w-48 md:h-auto md:rounded-none rounded-full mx-auto" 
  src="<?= $this->getViewFileUrl('Webkul_TailwindTest::images/img.jpg');?>" alt="" width="384" height="512">
  <div class="pt-6 md:p-8 text-center md:text-left space-y-4">
    <blockquote>
      <p class="text-lg font-medium">
        “Tailwind CSS is the only framework that I've seen scale
        on large teams. It’s easy to customize, adapts to any design,
        and the build size is tiny.”
      </p>
    </blockquote>
    <figcaption class="font-medium">
      <div class="text-sky-500 dark:text-sky-400">
        John Doe
      </div>
      <div class="text-slate-700 dark:text-slate-500">
        Software Engineer, XYZ
      </div>
    </figcaption>
  </div>
</figure>

Now create the input.css file in view/frontend/web/css/input.css. And write the content below.

@tailwind base;

@tailwind components;

@tailwind utilities;

This file contains the @tailwind directives which will place each of Tailwind’s layers to your main CSS file.

Now create the final output file. That contains the CSS from all your mentioned templates in configuration file.

For this run the CLI command:

npx tailwindcss -c app/code/Webkul/TailwindTest/view/frontend/web/js/tailwindcss-config.js -i app/code/Webkul/TailwindTest/view/frontend/web/css/input.css -o app/code/Webkul/TailwindTest/view/frontend/web/css/output.css

It generates the output.css at app/code/Webkul/TailwindTest/view/frontend/web/css/output.css