WELCOME TO TAILWIND EDITOR
WHAT IS TAILWIND EDITOR
Tailwind Editor lets you code HTML with TailwindCSS autocomplete and immediately see the results on the Live View section. This welcome page, is an example of using this editor. The code for this is avaialbe on the editor for your reference. A prequisite to using this app is the familiarity in using TailwindCSS. If you wish to learn how TailwindCSS works, please visit them on their website.
HOW TO USE
Input and Output
There are two sections to Tailwind Editor. The left side is the editor and the right side is the Live View. You can treat the editor as the body itself to an HTML page. If you are viewing this on a mobile screen, there is a EDITOR/LIVE VIEW button available, to switch between them.
Generate the CSS code
CSS equivalent code for Tailwind is availbe for use when you click the GENERATE button on the command bar. After waiting for about 5 seconds, a modal or dialog box will pop up with the CSS code, ready to be copied to the clipboard.
Customizing the Ace Editor
Transfer the focus to the editor by clicking on it. Then press F1 for command prompt to appear. This shows all the commands available for the Ace Editor and its shortcut keys. While still having the focus on the editor, you can press Ctrl+< to show the settings for Ace Editor. Here you can edit things like font size or wrapping of code on the editor, just to name a few.
FEATURES
Tailwind Autocomplete
Tailwind Editor has autocomplete for all TailwindCSS utility classes. Everthing from states, media queiries, and even arbitrary values are available for use.
Open in New Tab
If you need to use the developer tools for your browser or your developer extensions, it's best to open the webpage on a new tab instead of using the Live View. Just click the VIEW IN NEW TAB button and your page will be passed on to that new tab.
CSS Code Generation
CSS code equivalent for Tailwind is avaiable on demand in case you dont want to add Tailwind to your website and make it a bit faster by having fewer requests sent to the server.
Editor Customization
Ace Editor has a lot of customizations available at our disposal. Ready made Keybindings, font size, wrap, folding, etc. If you want to know how, please refer to the "HOW TO USE" section.
Responsive
Tailwind Editor is responsive. That means whether you are using this on the phone or your desktop PC, it can easily adjust itself to fit your screen.
AUTHOR NOTES
Sometimes, the Live View won't work immediately escpecially if a lot of code is written at one time. Because of this, a RELOAD button is available for your use to manually reload the the page and see the changes.
