As npm run build sets NODE_ENV variable to production, postcss will invoke purgeCSS too along with tailwindcss, autoprefixer ( ) to transform and purge unused styles resulting in light weight CSS file.Performs npm run build which triggers postcss to work on resources/css/tailwind.css file emitting formatted CSS file to static/css/tailwind.css.All the packages are installed as stated in package.json followed by hugo v0.74.0 mentioned in netlify.toml.On surface below will be the change in index.html when compared to other methods:īelow is the flow how this site is built in a production context when deployed to Netlify:
> git clone -single-branch -branch method1 ~/method2 & cd "$_" There’re new entries involved in method 2 which effectively utilizes NodeJS directly. Plugin which potentially transforms CSS with Javascript, I would describe it in a crude sense as a tool which bisects words into alphabets and hands over to various plugins to act upon resulting in most cases, a CSS file which can be directly consumed by html pages. Method 2: Using PostCSS (Without Hugo Pipes) § We are interested in only head section of index.html file from this repo where we are linking TailwindCSS from CDN. > git clone -single-branch -branch method1 ~/method1 & cd "$_" Method 1 is the easiest out of all three as this involves only pulling a CSS file from a CDN and linking it in your html pages (typically in baseof.html of hugo layouts).Īs we’ll be using a single html page we can refactor it to match recommended hugo project layout as a follow up.īelow repo holds required files to demonstrate all three methods but we’ll be cloning one branch at a time corresponding to our method:
I assume that you have a little knowledge about TailwindCSS, NodeJS and ecosystem around it, hugo blog structure (have a look at this post
Basics of HTML, CSS, JS and TailwindCSS from ScrimbaĪll the methods are tested against a single html page from TailwindCSS playgroundĪnd please follow along for some hands on.I wish to cover three methods (least to most productive) for setting up a hugo blog with tailwindcss and deploying to Netlify in this blog post.Īs my experience with blogging and web technologies in general is very less, apart from documentation I referred below resources to get upto speed, a huge thanks for those content creators and I highly recommend them as well.👏 When I have come across Tailwind CSS for creating a UI for my personal Hugo powered blog I found little information on integrating both with Netlify. Setup Hugo With Tailwindcss for Netlify | thoughtexpo thoughtexpo Home / Blog / Tags / RSS Setup Hugo With Tailwindcss for Netlify
0 kommentar(er)
