-
Notifications
You must be signed in to change notification settings - Fork 0
Using Tailwind v 4.x with Zurfbirb
You might want to work with tailwind css. This is completely optional - you could instead use a different css file, or a dropin css such as simple.css whatever you want. Or for a quick tryout, maybe no styles at all. But if you want to use tailwind with Zurfbirb, this is how you would install it without needing to install npm or node.js .
Navigate to your document root, then to assets/styles
On a browser window, go to https://github.com/tailwindlabs/tailwindcss/releases/ (this should be for v 4.x of Tailwind). Here is how to download the latest version of tailwind depending on if you've installed Zurfbirb on a remote server or locally:
For the remote server the release you want would be tailwindcss-linux-x64, then right click and copy link. Then in your server terminal window, navigate to the assets/styles directory inside your document root and then do:
curl -sLO pasted-link-here (ctrl-shift-v to paste in Linux terminal). Give it execute permissions:
chmod u+x tailwindcss-linux-x64
Then change the name to tailwindcss:
mv tailwindcss-linux-x64 tailwindcss
Download the binary for your operating system from https://github.com/tailwindlabs/tailwindcss/releases/ and save it inside the assets/styles directory inside your document root, Then give the tailwind binary execute permissions and change its name to tailwindcss
Then in the same directory as your downloaded tailwind binary, make a file called in.css and put this line in it:
@import "tailwindcss" source("../..");
then in terminal, do
./tailwindcss -i in.css -o out.css
The above instruction is for Linux as you would do for the remote server. If you are using a different operating system find out how to execute tailwindcss with the input file in.css and the output file out.css
The default home page is designed such that if you have tailwind installed as above with a css file out.css in assets/styles, the default home page will show with one line of text highlighted in yellow background. Tip: If you don't want to use tailwind, simply use a different CSS file in assets/styles and reference it as the stylesheet.
You can now use tailwind css classes in your project - just remember to reference the out.css file as the stylesheet. If you add or change classes in your website, then you will need to re-run the tailwind command to generate the updated css file. You can run the css command appended with the --watch option to have tailwind update your css file automatically when you make changes to your website files. For a remote server, this command is best done in the external ssh connection so that it doesn't stop every time you switch to a different menu item in Webmin.