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....
For further actions, you may consider blocking this person and/or reporting abuse
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.ah! you are right. Editing...
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.
Okay, thanks for the insight. I'll have a go at Nuxt.
Just what I was looking for!
But the problem now is that the build time is 10x more.
It only took 1-2s to build before, now it takes 10-12s by adding tailwind
Is there a way to cache the tailwind file?
I think it is being generated on each build in the dev server.
Update
Found a fix!
Instead of importing it in the
styletag, import it in thescripttag as the tailwindcss page specifies.This saved my time from 10s to 0.6s!
Add the following line to your
scripttagHi Jen,
I didn't read thru all the comments but there is an important correction needed:
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
.vuepressfile right in the expected place.github.com/vuejs/vuepress/blob/0.x... - the scripts don't lie
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.
Hey Jen, nice article!
What's the local() method used to specify the font family?
Thanks
Can you show me where it is? thanks!
Thanks a lot Jen! This post helped me a lot. I documented my learnings as well in this post:
amalytix.com/en/vuepress-tailwindc...
I hope it helps someone!
Love the combination between VuePress and Tailwind. Great article!
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 :)