Tailwindcss on grav

Hi. I'm new to Grav and I was wondering if there was a way to install Tailwind Css in order to use it for responsive design. Thanks!

Sure. You can use e.g. the Shortcode Assets Plugin. This example shows you the different variants of adding a CSS file:

[assets=css]
custom-style.css
/blog/some-blog/post/style.css
//cdnjs.cloudflare.com/ajax/libs/1140/2.0/1140.css
http://somesite.com/js/cookies.min.css
[/assets]

Documentation here:
https://github.com/getgrav/grav-plugin-shortcode-assets

Or use this plugin for site wide CSS injection:
https://github.com/getgrav/grav-plugin-custom-css/blob/master/README.md

@planetoid127, I took a quick look at Tailwind Css and did some playing using the installation guide.

The following steps will add css generated by Tailwind to your site:

• Create fresh Grav installation
• Install the Devtools plugin. In the root of your site, run:
  $ bin/gpm install devtools
• Create your own theme using the devtools plugin:
  $ bin/plugin devtools newtheme
  • I named the theme 'mytheme'
  • In the wizard when asked 'Please choose an option', choose 'pure-blank' as theme.
• Tell Grav to use the new theme. Set the following in '/user/config/system.yam':
  YAMLCopy

  pages:
   theme: mytheme
  

• Create folder '/themes/mytheme/build'
• Inside folder '/themes/mytheme/build' run:
  $ npm install tailwindcss
• Create file '/themes/mytheme/css-tailwind/custom.css' with the following content:
  TXTCopy

  @tailwind base;
  @tailwind components;
  @tailwind utilities;
  

• Inside folder 'build', run the following command:
  $ npx tailwindcss build ../css-tailwind/custom.css -o ../css/custom.css
  Note: Template '/user/themes/mytheme/templates/partials/base.html.twig' loads '/css/custom.css' by default. If you want a different filename, change it in above scripts and in 'base.html.twig'.
• Point the browser to your site. No, it doesn't look pretty...
  I did not research how Tailwind should be customized. I'll leave that up to you.. ;-)
• Next: Customize your new theme and Tailwind to your liking...

Hope this helps..

Hi @planetoid127, there will be big news related to a Grav Tailwind-based theme soon(ish) with Grav Premium… maybe even in just a few weeks at https://getgrav.org/ 🎉

As this post is pretty high in search results for grav and tailwindcss, recent grav version and the devtools support the creation of new themes with tailwindcss or tailwindcss-mix (laravel). It lets you chose on new-theme command. That's pretty neat :)