Build a Beautiful Website with VuePress and Tailwind.css

Jen Looper on December 17, 2018

Recently I've been working on web sites. Big deal, right? As a web developer, it's kind of my thing. For me, though, this is a change in direction.... [Read Full]
markdown guide
 

Hi Jen,

Under Edit Vuepress to support Tailwind you have:

First, in .vuepress/theme/config.js, edit the code to use postcss to import the tailwindcss plugins and config file.

I think that should be just .vuepress/config.js.

 
 

This is a great article! Thanks, Jen, I just started using tailwind. It's really amazing but I feel like I need to take some CSS refresher classes so I can understand the basics again to use it right.

 

This is a good point. I found myself hanging out a lot in the inspector, reminding myself of weird things you have to do to make your background image behave. Once you remember the css, then you find the abstraction in Tailwind and can move on. Eventually I am assuming I'm going to have some tried and true designs I can just spin up for the various small websites I need. :)

 

How do you feel about using this for a large project ? I would love to see the performance on it vs vanilla css.

I think it will do really well. The key would be to shrink down that tailwind css file as much as you can, and even minimize it if possible. In terms of Vue.js itself, it has very good performance. I'm going to run our sites through lighthouse and try to make them as performant as possible. You can follow our progress at nativescript-vue.org, which is already a Tailwind.css site, but with a custom static site genertor, to see how moving to VuePress will impact it.

I've used tailwind a bit and usually run it through the PurgeCSS pipeline to cut down the size.

It pretty much just does a grep for every tailwind class in your vue/js/html files and if there is no match - it removes it from the css file. You can over-ride it if you're doing some fancy inline-template/variable-substitution stuff too :-)

It's especially nice as you don't need to change the tailwind config at all while you are developing - so you don't find yourself deleting a load of stuff then thinking 'damn, I wish I had those orange background colours after all...' ;-)

This is a super tip. I'll edit the article accordingly and credit you! Thank you!

Goodness - it's like christmas has come early :-D Thank you! :-D

 

Very useful article! Have you tried Gridsome? If not, you should give it a shot. I would love to read your thoughts regarding which use cases are best suited for one or another.

 

I haven’t, it’s be interesting to take a look.

 

The thing is that I'm not sure it's possible to build a multisection page where the contents are splitted in several markdown files with VuePress. That's not its main goal I guess.

VuePress (in my understanding) is meant for documentation websites whereas Gridsome can accommodate any (Markdown-based or Vue-based) static sites so I think Gridsome might be better for your use case.

However, I haven't used both (other than a small start with Gridsome) so I can't say where VuePress is more suited than Gridsome or Nuxt; but I'll love to read about that from someone who knows.

Lucky you! I wrote a nice article on this. Jokes aside, VuePress can be extended to cover many use cases, as can Gridsome. I had a pretty good experience with VuePress so will stick with it. One thing I wouldn't recommend is Hexo. For Nuxt, I'd use it for sites that have more sophisticated needs (such as vuevixens.org).

Would you recommend VuePress for a portfolio website (like this one) and/or a company one with a portal (like spiritcartel.com)?

hm, for the first site, there's a lot of custom styling, and VuePress might honestly get in the way of that. SpiritCartel seems pretty complex...honestly I might go for Nuxt on those sites.

 

Awesome article! I understand losing some of the boilerplate functionality of vuepress is necessary to implement custom styles but is there a way in which I can still utilise the boilerplate sidebar functionality? For instance when creating markdown files the headings would automatically create sidebar navigation.

 

Hi Jen,

I didn't read thru all the comments but there is an important correction needed:

...a static site generating tool to create nice-looking documentation (an example is VuePress's own site)...

Actually Vue (and Vuepress) does not use Vuepress for their documentation/sites; They use Hexo. I know, odd... but look at the repos - They even mention it in several places and all of Vue's docs are opensource (except vuepress) running on Hexo.

 

Hold on a second.

I didn't say the Vue.js docs are built with Vuepress (it's well known that they aren't...yet). But the Vuepress docs site does, as I stated. The Vuepress docs are here: github.com/vuejs/vuepress/tree/0.x..., and you can contribute as per usual. You can see the .vuepress file right in the expected place.

github.com/vuejs/vuepress/blob/0.x... - the scripts don't lie

 

Love the combination between VuePress and Tailwind. Great article!

 

Hey Jen, nice article!
What's the local() method used to specify the font family?

Thanks

 
 

Thanks Jen,
Just wondering if you considered Vuetify, as it's specifically aimed at Vue ?
vuetifyjs.com/en/

TIA, Dave

 

Hi, yes, big fan of Vuetify. We use it for vuevixens.org. For this project, I want total control of my look-and-feel and I don’t need components, so Tailwind made more sense. Depends on your needs :)

code of conduct - report abuse