Editor - Tailwind

Last modified:

Blockstudio supports writing Tailwind directly in the editor.

Setup

To get started, simply enable Tailwind via the settings panel or using the settings/tailwind/enabled setting.

blockstudio.json

                {
  "tailwind": {
    "enabled": true
  }
}

      
Copy
functions.php

              add_filter('blockstudio/settings/tailwind/enabled', function() {
    return true;
  });

      
Copy

Once enabled, you can start writing Tailwind inside your rendering templates.

How does it work?

Blockstudio uses the Tailwind CDN version to compile your Tailwind classes when developing in the editor. Upon saving a block, all used Tailwind classes are saved to a file and automatically enqueued on the frontend and block editor.

Recompiling

If you need to recompile Tailwind classes after changes in your templates not made with the Blockstudio editor, you can do so by simply saving the settings again. This will recompile the Tailwind classes and save them to the file again.

Config

You can also provide a custom Tailwind config file by setting the settings/tailwind/config setting or using the UI in the settings panel.

blockstudio.json

                {
  "tailwind": {
    "config": {
      "theme": {
        "extend": {
          "colors": {
            "primary": "#ff0000"
          }
        }
      }
    }
  }
}

      
Copy
functions.php

              add_filter('blockstudio/settings/tailwind/config', function() {
    return [ 
    "theme" => [ 
      "extend" => [ 
        "colors" => [ 
            "primary" => "#ff0000"
         ]
       ]
     ]
 ]; });

      
Copy