A simple tag for embedding the Tailwind CDN, Tailwind config, and site css when the site is in a dev environment for Statamic 4+
This addon allows you to use a {{ tailwind_dev_mode }} tag in the <head> to not only include Tailwind's CDN url but also include the project's tailwind.config.js and site.css inline in the browser.
This means that you can make any changes you want in browser and still have all your customizations from your Tailwind config and site css.
This tag is automatically turned off when the environment is set to production in the .env of the project.
Run the following command from your project root:
composer require godismyjudge95/statamic-tailwind-dev-modeSimply use the Tailwind dev mode tag in the <head>:
{{ tailwind_dev_mode }}
Outputs:
< script src="https://cdn.tailwindcss.com"></script>
< script>
// Your tailwind.config.js here
</script>
<style type="text/tailwindcss">
/** Your resources/css/site.css **/
</style>If your css path is different than resources/css/site.css you can pass the css parameter:
{{ tailwind_dev_mode css="resources/css/tailwind.css" }}