rhukster
commented
3 years ago While I want to do a better integrated solution, a quick fix is to do this:
First, rather than making changes directly to tailwind that will be lost with an update, you should create a copy of tailwind using the devtools plugin. (more info: https://getgrav.org/premium/typhoon/docs#create-a-custom-theme-from-typhoon)
Assuming you have done this, you will need to be 'watching' for custom CSS changes, so install the npm dependencies and run the watch command: https://getgrav.org/premium/typhoon/docs#installing-npm-to-compile-css
Then, you can add some simple CSS to the css/custom/plugins.css file. At the bottom add:
/* LANGSWITCHER PLUGIN */
ul.langswitcher {
@apply flex h-16 mr-8;
li {
@apply inline-flex ml-4 text-sm items-center pt-1 font-medium;
}
}
/* END LANGSWITCHER */On saving you should see some output about compilation where you ran your npm run watch command.
This should be enough to give the langswitcher styling to integrate with the menu:
NOTE: Make sure you have disabled the built-in CSS for langswitcher as that will only conflict.
key-notes
Could anyone perhaps provide the CSS needed to implement the LangSwitcher plugin with the Typhoon theme? Many thanks in advance.