Reading list Switch to dark mode

    How to use Tailwind.css in Magento 2

    Updated 18 May 2023

    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
    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!
    <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!
    <h1 class="text-3xl font-bold underline">
        Content Display
    <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">
          <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.”
        <figcaption class="font-medium">
          <div class="text-sky-500 dark:text-sky-400">
            John Doe
          <div class="text-slate-700 dark:text-slate-500">
            Software Engineer, XYZ

    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


    Content in below snapshot is minified and managed via cmd line:


    npx tailwindcss -o app/code/Webkul/TailwindTest/view/frontend/web/css/output.css –minify

    Now we can use this CSS inside the layout file as managed via magento.


    Now run the front-end on route test/test/index correspond to the layout:


    For Tailwind reference

    That’s it !!

    Thanks & Happy Coding!

    . . .

    Leave a Comment

    Your email address will not be published. Required fields are marked*

    Be the first to comment.

    Back to Top

    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home