PHPackages empiricompany/openmage-mm\_cmscontentfilemode - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. empiricompany/openmage-mm\_cmscontentfilemode ActiveMagento-module[Utility & Helpers](/categories/utility) empiricompany/openmage-mm\_cmscontentfilemode ============================================= OpenMage / Magento 1.9 module extension that allows to work on static files for CMS Static Blocks / Pages content. 792[1 PRs](https://github.com/magemega/openmage-mm_cmscontentfilemode/pulls)PHP Since Jun 12Pushed 1y ago3 watchersCompare [ Source](https://github.com/magemega/openmage-mm_cmscontentfilemode)[ Packagist](https://packagist.org/packages/empiricompany/openmage-mm_cmscontentfilemode)[ RSS](/packages/empiricompany-openmage-mm-cmscontentfilemode/feed)WikiDiscussions main Synced today READMEChangelogDependenciesVersions (1)Used By (0) Manage content of CMS Static blocks and Pages from files ======================================================== [](#manage-content-of-cms-static-blocks-and-pages-from-files) > ## 🔥 Auto compile Tailwindcss \[BETA\] > > [](#-auto-compile-tailwindcss-beta) > > If you're a fan of Tailwind CSS, you must definitely try the BETA feature that auto-compiles the files and generates a CSS with Tailwind classes! You can also create your own reusable templates and add them to TinyMCE! > > ## 🔥 Discover also the integration of [Monaco Editor](https://github.com/empiricompany/openmage-mm_monacoeditor) in OpenMage for an amazing Developer Experience! > > [](#-discover-also-the-integration-of-monaco-editor-in-openmage-for-an-amazing-developer-experience) --- Requirements ------------ [](#requirements) - [OpenMage](https://github.com/OpenMage/magento-lts) \[^20.2.0\] : starting from this version, TinyMCE 6 has been integrated > NOTE: With some modifications, it would also work with the old editor. If you're interested, open a pull request, but the advice is to update. Description ----------- [](#description) The extension creates a file copy and keeps it synced with the content of enabled CMS Static Blocks and Pages. The copy is kept synchronized in both directions, meaning that saving a static block updates the file copy and vice versa! This allows working directly on the file with all the benefits that an IDE can offer, such as auto-completion, syntax highlighting, and more, instead of working in the textarea. [![demo-tailwindcss-ide](https://private-user-images.githubusercontent.com/5071467/282297422-04a25905-63db-4f70-8243-8501d215de49.gif?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3ODIzMTM3ODcsIm5iZiI6MTc4MjMxMzQ4NywicGF0aCI6Ii81MDcxNDY3LzI4MjI5NzQyMi0wNGEyNTkwNS02M2RiLTRmNzAtODI0My04NTAxZDIxNWRlNDkuZ2lmP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI2MDYyNCUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNjA2MjRUMTUwNDQ3WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9ZDExNDIyYzg2MzQ4MzQ3YmM3YTZiOGE2Njk1YTg5ZWQ2MTUyYTYwN2MxNTljMjY2ZjcxZjlkNjRmYjFlMzNjOCZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmcmVzcG9uc2UtY29udGVudC10eXBlPWltYWdlJTJGZ2lmIn0.NaFg8-UjbLSpRaTPkMemuOwJdDYeqo4oNn4iMFYuwSQ)](https://private-user-images.githubusercontent.com/5071467/282297422-04a25905-63db-4f70-8243-8501d215de49.gif?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3ODIzMTM3ODcsIm5iZiI6MTc4MjMxMzQ4NywicGF0aCI6Ii81MDcxNDY3LzI4MjI5NzQyMi0wNGEyNTkwNS02M2RiLTRmNzAtODI0My04NTAxZDIxNWRlNDkuZ2lmP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI2MDYyNCUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNjA2MjRUMTUwNDQ3WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9ZDExNDIyYzg2MzQ4MzQ3YmM3YTZiOGE2Njk1YTg5ZWQ2MTUyYTYwN2MxNTljMjY2ZjcxZjlkNjRmYjFlMzNjOCZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmcmVzcG9uc2UtY29udGVudC10eXBlPWltYWdlJTJGZ2lmIn0.NaFg8-UjbLSpRaTPkMemuOwJdDYeqo4oNn4iMFYuwSQ) It is very useful when there is a lot of HTML markup in a CMS content, for example on the homepage or if you have to deal with themes that heavily rely on static blocks like Porto (which I particularly dislike because of this). In addition to this, it's possible to include the created files in a workflow for CSS purging for example (and this is the original purpose for which it was created). File creation is disabled by default, you can enable one or more static blocks or pages in: `System -> Configuration -> Content Management`. [![config](https://private-user-images.githubusercontent.com/5071467/282291369-503d5d3e-46eb-4868-8fff-815e996bbeab.png?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3ODIzMTM3ODcsIm5iZiI6MTc4MjMxMzQ4NywicGF0aCI6Ii81MDcxNDY3LzI4MjI5MTM2OS01MDNkNWQzZS00NmViLTQ4NjgtOGZmZi04MTVlOTk2YmJlYWIucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI2MDYyNCUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNjA2MjRUMTUwNDQ3WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9ZmQxYTZjODJlN2NmMmZkN2Y4ODQ5YTRmN2Y1YWIzM2YzZjVmZmVjZTdmMGM0MzAzZDAyMzhhNTM5MzEyNjBiMyZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmcmVzcG9uc2UtY29udGVudC10eXBlPWltYWdlJTJGcG5nIn0.7ERKvxBfCdS6JAWrgRTCAwAIKwTfEDO_S49gTi-fdn4)](https://private-user-images.githubusercontent.com/5071467/282291369-503d5d3e-46eb-4868-8fff-815e996bbeab.png?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3ODIzMTM3ODcsIm5iZiI6MTc4MjMxMzQ4NywicGF0aCI6Ii81MDcxNDY3LzI4MjI5MTM2OS01MDNkNWQzZS00NmViLTQ4NjgtOGZmZi04MTVlOTk2YmJlYWIucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI2MDYyNCUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNjA2MjRUMTUwNDQ3WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9ZmQxYTZjODJlN2NmMmZkN2Y4ODQ5YTRmN2Y1YWIzM2YzZjVmZmVjZTdmMGM0MzAzZDAyMzhhNTM5MzEyNjBiMyZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmcmVzcG9uc2UtY29udGVudC10eXBlPWltYWdlJTJGcG5nIn0.7ERKvxBfCdS6JAWrgRTCAwAIKwTfEDO_S49gTi-fdn4) The files are created in the following locations: - `app/design/{package}/{name}/template/cms/static_block/`**static\_block\_identifier**`.html` - `app/design/{package}/{name}/template/cms/static_page/`**url\_key\_page**`.html` For example: - `app/design/rwd/default/template/cms/static_block/`**category\_landingpage\_vip**`.html` - `app/design/rwd/default/template/cms/static_page/`**company**`.html` ### Notes: [](#notes) - files are created for each package/name corresponding to every enabled store view for the CMS - files are correctly renamed if you modify the identifier or url\_key - ! files are not deleted if a static block/page is removed - If your static block / page is assigned to multiple store views with different themes applied, files will be created in all corresponding locations ⚠️ Important ⚠️ =============== [](#️-important-️) Know issue: ----------- [](#know-issue) If you have multiple static blocks / pages with the same identifier assigned to different views (done for translations), they will be overwritten with the latest modified version. This case is not yet supported and needs to be implemented. Disclaimer ---------- [](#disclaimer) Personally, I use this module in production, but always remember to make a full backup before testing it. I am not responsible for any damages or data loss that may occur. 🔥 TailwindCSS Features \[BETA\] ------------------------------- [](#-tailwindcss-features-beta) Enable TailwindCSS compiler in configuration and unlock the power of [TailwindCSS](https://tailwindcss.com/docs/utility-first)! 1. **Compile TailwindCSS classes and preview in TinyMCE Editor** Utilize TailwindCSS classes in your content and automatically compile them into a CSS file that will be added to your frontend in this location: - `https://openmage.dev/skin/frontend/rwd/default/css/tailwind.css` 2. **Create templates of reusable blocks** You can create reusable templates inside your theme in this path: - `app/design/{package}/{name}/template/cms/tinymce_templates/` Example: `app/design/rwd/default/template/cms/tinymce_templates/grid-4-columns.html` ``` 01 02 03 04 05 06 07 08 09 ``` Then you can select the templates in TinyMCE and add to your content. [![tinyMCETemplateBtn](https://private-user-images.githubusercontent.com/5071467/282291512-93918c71-0587-4671-b753-6e766141b6ff.png?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3ODIzMTM3ODcsIm5iZiI6MTc4MjMxMzQ4NywicGF0aCI6Ii81MDcxNDY3LzI4MjI5MTUxMi05MzkxOGM3MS0wNTg3LTQ2NzEtYjc1My02ZTc2NjE0MWI2ZmYucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI2MDYyNCUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNjA2MjRUMTUwNDQ3WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9MmIwMDIzNDA4ZmQ1YWY0YTA5OGZmOWRiOWJmZGY5MjhlOTgwMDEyY2VmOTQ5NjQ4MDk0NDIxOTVhMzUxOWI4ZiZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmcmVzcG9uc2UtY29udGVudC10eXBlPWltYWdlJTJGcG5nIn0.Nq5Dpm9Mt-N8M49UV341-BRnV8lMrudp1oh_Wnyy9NQ)](https://private-user-images.githubusercontent.com/5071467/282291512-93918c71-0587-4671-b753-6e766141b6ff.png?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3ODIzMTM3ODcsIm5iZiI6MTc4MjMxMzQ4NywicGF0aCI6Ii81MDcxNDY3LzI4MjI5MTUxMi05MzkxOGM3MS0wNTg3LTQ2NzEtYjc1My02ZTc2NjE0MWI2ZmYucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI2MDYyNCUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNjA2MjRUMTUwNDQ3WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9MmIwMDIzNDA4ZmQ1YWY0YTA5OGZmOWRiOWJmZGY5MjhlOTgwMDEyY2VmOTQ5NjQ4MDk0NDIxOTVhMzUxOWI4ZiZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmcmVzcG9uc2UtY29udGVudC10eXBlPWltYWdlJTJGcG5nIn0.Nq5Dpm9Mt-N8M49UV341-BRnV8lMrudp1oh_Wnyy9NQ)[![tinyMCETemplatePopup](https://private-user-images.githubusercontent.com/5071467/282291481-457868c7-1660-42be-b951-0b6b35b916a8.png?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3ODIzMTM3ODcsIm5iZiI6MTc4MjMxMzQ4NywicGF0aCI6Ii81MDcxNDY3LzI4MjI5MTQ4MS00NTc4NjhjNy0xNjYwLTQyYmUtYjk1MS0wYjZiMzViOTE2YTgucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI2MDYyNCUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNjA2MjRUMTUwNDQ3WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9YTcwN2U0NTZiZGQ5ZWI5MWFkNzg5MGFmZWE4YTczMTllZGE2YTdkZmFlNjlmOTRlYWFmOGU0ODNhMDc4OTAwNSZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmcmVzcG9uc2UtY29udGVudC10eXBlPWltYWdlJTJGcG5nIn0.TQXwD_Ag2WakRmSIw67o-sL_Ml3PFuFh-Pe9kthTeNo)](https://private-user-images.githubusercontent.com/5071467/282291481-457868c7-1660-42be-b951-0b6b35b916a8.png?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3ODIzMTM3ODcsIm5iZiI6MTc4MjMxMzQ4NywicGF0aCI6Ii81MDcxNDY3LzI4MjI5MTQ4MS00NTc4NjhjNy0xNjYwLTQyYmUtYjk1MS0wYjZiMzViOTE2YTgucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI2MDYyNCUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNjA2MjRUMTUwNDQ3WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9YTcwN2U0NTZiZGQ5ZWI5MWFkNzg5MGFmZWE4YTczMTllZGE2YTdkZmFlNjlmOTRlYWFmOGU0ODNhMDc4OTAwNSZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmcmVzcG9uc2UtY29udGVudC10eXBlPWltYWdlJTJGcG5nIn0.TQXwD_Ag2WakRmSIw67o-sL_Ml3PFuFh-Pe9kthTeNo) 3. **Customize TailwindCSS compiler with your own tailwind.config.js and base file** You can create your own tailwind.config.js inside your theme skin css directory for example to enable [preflight](https://tailwindcss.com/docs/preflight) (disabled by default), add prefix like 'tw-' or add plugins. **Example:** Customize TailwindCSS config: `app/design/frontend/rwd/default/css/tailwind.config.js` ``` /** @type {import('tailwindcss').Config} */ module.exports = { prefix: '', corePlugins: { preflight: true, }, theme: { extend: {}, }, plugins: [ require('@tailwindcss/forms'), require('@tailwindcss/typography'), ], } ``` You can find default config in lib/tailwindcss/tailwind.config.js, no base CSS is added by default. > PS: I recommend you adding the `prefix: 'tw-'` to Tailwind classes and keeping [preflight ](https://tailwindcss.com/docs/preflight) disabled if your theme is not built with TailwindCSS. For example, the rwd/default theme includes the `.block` class, which corresponds to `display: block;` in TailwindCSS. Then, instead of using `bg-fuchsia-500`, you have to use `tw-bg-fuchsia-500`. I want to make this mode configurable in the future. You can also create your TailwindCSS entry point to add/remove components or extend layers `app/design/frontend/rwd/default/css/tailwind-base.css` ``` @tailwind base; @tailwind components; @tailwind utilities; @layer components { .my-button-primary { @apply bg-blue-500 text-white font-bold py-2 px-4 rounded; } } ``` Then you can use in your content like: ``` SEND ``` Troubleshoot ------------ [](#troubleshoot) **TailwindCSS styles not rendered** If you don't see your Tailwind classes applied, make sure they are not being overridden by the CSS of your template. Example: [![css-issue](https://private-user-images.githubusercontent.com/5071467/282298184-60bde99d-d485-42e9-97d8-2d52d58dca63.png?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3ODIzMTM3ODcsIm5iZiI6MTc4MjMxMzQ4NywicGF0aCI6Ii81MDcxNDY3LzI4MjI5ODE4NC02MGJkZTk5ZC1kNDg1LTQyZTktOTdkOC0yZDUyZDU4ZGNhNjMucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI2MDYyNCUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNjA2MjRUMTUwNDQ3WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9ZWYyYmZjMWQ0M2YzN2UwNjA2Y2I4YTZhNzJmNjhkY2NlMThiMTY0OTY2M2NkM2JiODNiNDk1NzMzYTdmNGVlYyZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmcmVzcG9uc2UtY29udGVudC10eXBlPWltYWdlJTJGcG5nIn0.9gDPBFy6Jp_mKP9Gy_nyvSXZJjlZthLPbeyVBdY9KIU)](https://private-user-images.githubusercontent.com/5071467/282298184-60bde99d-d485-42e9-97d8-2d52d58dca63.png?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3ODIzMTM3ODcsIm5iZiI6MTc4MjMxMzQ4NywicGF0aCI6Ii81MDcxNDY3LzI4MjI5ODE4NC02MGJkZTk5ZC1kNDg1LTQyZTktOTdkOC0yZDUyZDU4ZGNhNjMucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI2MDYyNCUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNjA2MjRUMTUwNDQ3WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9ZWYyYmZjMWQ0M2YzN2UwNjA2Y2I4YTZhNzJmNjhkY2NlMThiMTY0OTY2M2NkM2JiODNiNDk1NzMzYTdmNGVlYyZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmcmVzcG9uc2UtY29udGVudC10eXBlPWltYWdlJTJGcG5nIn0.9gDPBFy6Jp_mKP9Gy_nyvSXZJjlZthLPbeyVBdY9KIU) In this case, use `!text-white` and consider to customize `tailwind.config.js` by adding a prefix `tw-` for all Tailwind styles. > NOTE: if you use a prefix add it after modifiers like `md:!tw-text-white` Screenshot ---------- [](#screenshot) [![demotailwindopenmage_template](https://private-user-images.githubusercontent.com/5071467/282296397-6fff76f3-53b3-4347-afcc-32a2f1553ad1.gif?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3ODIzMTM3ODcsIm5iZiI6MTc4MjMxMzQ4NywicGF0aCI6Ii81MDcxNDY3LzI4MjI5NjM5Ny02ZmZmNzZmMy01M2IzLTQzNDctYWZjYy0zMmEyZjE1NTNhZDEuZ2lmP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI2MDYyNCUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNjA2MjRUMTUwNDQ3WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9YzkwMmM1ZjU2ZmQ4MTMzZWMzOTczNjI2YjMwODgyMWU2OWE5NWIyMDU3N2NmZjI4MTk2MTNkNmQ4MzcxN2E2YSZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmcmVzcG9uc2UtY29udGVudC10eXBlPWltYWdlJTJGZ2lmIn0.VHhIsQHg96C6T48gTY9R_o03hqQtD-7jHOTecxwxpBA)](https://private-user-images.githubusercontent.com/5071467/282296397-6fff76f3-53b3-4347-afcc-32a2f1553ad1.gif?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3ODIzMTM3ODcsIm5iZiI6MTc4MjMxMzQ4NywicGF0aCI6Ii81MDcxNDY3LzI4MjI5NjM5Ny02ZmZmNzZmMy01M2IzLTQzNDctYWZjYy0zMmEyZjE1NTNhZDEuZ2lmP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI2MDYyNCUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNjA2MjRUMTUwNDQ3WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9YzkwMmM1ZjU2ZmQ4MTMzZWMzOTczNjI2YjMwODgyMWU2OWE5NWIyMDU3N2NmZjI4MTk2MTNkNmQ4MzcxN2E2YSZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmcmVzcG9uc2UtY29udGVudC10eXBlPWltYWdlJTJGZ2lmIn0.VHhIsQHg96C6T48gTY9R_o03hqQtD-7jHOTecxwxpBA) [![demo1](https://private-user-images.githubusercontent.com/5071467/282291694-6b23373f-db11-482a-b5c3-6c188b828324.png?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3ODIzMTM3ODcsIm5iZiI6MTc4MjMxMzQ4NywicGF0aCI6Ii81MDcxNDY3LzI4MjI5MTY5NC02YjIzMzczZi1kYjExLTQ4MmEtYjVjMy02YzE4OGI4MjgzMjQucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI2MDYyNCUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNjA2MjRUMTUwNDQ3WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9ZjQyY2I4NjA4MDJlMDdiMmNhZGI4ODViZDg4OGE5YmFlZjMyMmVlNWYzZTM4ZDYwNGI3OTI2YmE2OWExYWVjNiZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmcmVzcG9uc2UtY29udGVudC10eXBlPWltYWdlJTJGcG5nIn0.YoYXOxij6MO9yhrqKJ828sjh7y_mELCIiaSPdfj0Re4)](https://private-user-images.githubusercontent.com/5071467/282291694-6b23373f-db11-482a-b5c3-6c188b828324.png?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3ODIzMTM3ODcsIm5iZiI6MTc4MjMxMzQ4NywicGF0aCI6Ii81MDcxNDY3LzI4MjI5MTY5NC02YjIzMzczZi1kYjExLTQ4MmEtYjVjMy02YzE4OGI4MjgzMjQucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI2MDYyNCUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNjA2MjRUMTUwNDQ3WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9ZjQyY2I4NjA4MDJlMDdiMmNhZGI4ODViZDg4OGE5YmFlZjMyMmVlNWYzZTM4ZDYwNGI3OTI2YmE2OWExYWVjNiZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmcmVzcG9uc2UtY29udGVudC10eXBlPWltYWdlJTJGcG5nIn0.YoYXOxij6MO9yhrqKJ828sjh7y_mELCIiaSPdfj0Re4)[![demo2](https://private-user-images.githubusercontent.com/5071467/282292345-dd2a3817-f183-4f24-a9cb-4640bdfefd9c.png?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3ODIzMTM3ODcsIm5iZiI6MTc4MjMxMzQ4NywicGF0aCI6Ii81MDcxNDY3LzI4MjI5MjM0NS1kZDJhMzgxNy1mMTgzLTRmMjQtYTljYi00NjQwYmRmZWZkOWMucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI2MDYyNCUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNjA2MjRUMTUwNDQ3WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9ZmNkMmYzM2E3MTFmOGY5ZGM4Mjk4OWMyOTdjYzFhNDdkMTRiZjFjMzAyMjUzY2NjZjUwY2VlMmE5ZTM0YTc1ZSZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmcmVzcG9uc2UtY29udGVudC10eXBlPWltYWdlJTJGcG5nIn0.oa7SfcmPI4FPoQlnDRvB2wmOLzjAtGbVZj5Zj4DIrpE)](https://private-user-images.githubusercontent.com/5071467/282292345-dd2a3817-f183-4f24-a9cb-4640bdfefd9c.png?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3ODIzMTM3ODcsIm5iZiI6MTc4MjMxMzQ4NywicGF0aCI6Ii81MDcxNDY3LzI4MjI5MjM0NS1kZDJhMzgxNy1mMTgzLTRmMjQtYTljYi00NjQwYmRmZWZkOWMucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI2MDYyNCUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNjA2MjRUMTUwNDQ3WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9ZmNkMmYzM2E3MTFmOGY5ZGM4Mjk4OWMyOTdjYzFhNDdkMTRiZjFjMzAyMjUzY2NjZjUwY2VlMmE5ZTM0YTc1ZSZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmcmVzcG9uc2UtY29udGVudC10eXBlPWltYWdlJTJGcG5nIn0.oa7SfcmPI4FPoQlnDRvB2wmOLzjAtGbVZj5Zj4DIrpE) ⚠️ Highly experimental ---------------------- [](#️-highly-experimental) You can configure TailwindCSS to look into all your theme files and forcibly recompile TailwindCSS while development (enabled only for Developer IPs). Example: ``` /** @type {import('tailwindcss').Config} */ module.exports = { prefix: '', corePlugins: { preflight: false, }, content: [ '../../../app/design/frontend/base/default/**/*.phtml', '../../../app/design/frontend/rwd/default/**/*.phtml', '../../../app/design/frontend/rwd/lightclean/**/*.phtml', '../../../skin/frontend/rwd/lgihtclean/js/*.js', '../../../js/*.js' ], theme: { extend: {}, }, plugins: [ //require('@tailwindcss/forms'), //require('@tailwindcss/typography'), ], } ``` > NOTE: It has never been tested, so I don't know what the performance of the binary compiler is with so many files. > You can experiment starting from another interesting project [openmage-theme-lanzarote](https://github.com/fballiano/openmage-theme-lanzarote) without the need to install BUN, but I don't know how it performs. Let me know! ### Support [](#support) --- If you have any issues with this extension, please open an issue on GitHub. ### Contribution [](#contribution) --- Any contributions are highly appreciated. The best way to contribute code is to open a [pull request on GitHub](https://help.github.com/articles/using-pull-requests). ### Licence [](#licence) --- [OSL - Open Software Licence 3.0](http://opensource.org/licenses/osl-3.0.php) ### Health Score 18 — LowBetter than 8% of packages Maintenance36 Infrequent updates — may be unmaintained Popularity11 Limited adoption so far Community10 Small or concentrated contributor base Maturity15 Early-stage or recently created project Bus Factor1 Top contributor holds 100% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Community Maintainers ![](https://avatars.githubusercontent.com/u/5071467?v=4)[Tony](/maintainers/empiricompany)[@empiricompany](https://github.com/empiricompany) --- Top Contributors [![empiricompany](https://avatars.githubusercontent.com/u/5071467?v=4)](https://github.com/empiricompany "empiricompany (56 commits)") --- Tags magento1openmagetailwindcss ### Embed Badge ![Health badge](/badges/empiricompany-openmage-mm-cmscontentfilemode/health.svg) ``` [![Health](https://phpackages.com/badges/empiricompany-openmage-mm-cmscontentfilemode/health.svg)](https://phpackages.com/packages/empiricompany-openmage-mm-cmscontentfilemode) ``` ### Alternatives [sadekd/nova-opening-hours-field Laravel Nova custom field for Spatie Opening Hours 38329.3k](/packages/sadekd-nova-opening-hours-field)[jasonlam604/stringizer Stringizer is a PHP string manipulation library with support for method chaining and multibyte handling 35110.5k1](/packages/jasonlam604-stringizer)[instaclick/symfony2-coding-standard A code standard to check against the Symfony coding standards. 1048.9k13](/packages/instaclick-symfony2-coding-standard) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)