Editor – Tailwind

Blockstudio supports writing Tailwind directly in the editor.

Setup

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

      
Copy

              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

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

      
Copy

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

      
Copy