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:

Or use this plugin for site wide CSS injection:

@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’:
    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:
    @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… :wink:
  • Next: Customize your new theme and Tailwind to your liking…

Hope this helps…