Tailwindcss on grav

Support Themes & Styling
1

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!

2

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:

3

@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…

2 Likes
4

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/ :tada:

5

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 :slight_smile:

1 Like