Upgrade Hugo theme from Tailwind CSS 2.0 to Tailwind CSS 3.0. Here are the steps:

1. Update your package.json file: Run the following commands in your terminal:

npm uninstall tailwindcss
npm install tailwindcss@latest

2. Update your tailwind.config.js file: Tailwind CSS 3.0 introduces some changes to the configuration file. Update your tailwind.config.js file to match the new format. Refer to the Tailwind CSS documentation.

3. Update your CSS files: Tailwind CSS 3.0 introduces some new utility classes and deprecates some old ones. Go through your CSS files and update any classes that have been changed or removed.

4. Rebuild your CSS: Run the following command in your terminal:

npm run build

5. Test your site: Test your site to make sure everything is working as expected. If you encounter any issues, refer to the Tailwind CSS documentation for troubleshooting.

Goal

Enable anybody to change the default colors of this theme without having to understand file formatting or CSS.

Idea

Provide access to custom colors as outlined in https://github.com/janraasch/hugo-product-launch/blob/master/assets/css/main.css via a colors.yml-file which may be conveniently edited via https://forestry.io/docs/settings/fields/color-picker/. Depends on #1.

Problem

After installation, hugo server fails due to the following error:

Error: Error building site: POSTCSS: failed to transform "css/main.css" (text/css): TypeError: Object.entries(...).flatMap is not 
a function

Solution

Tailwind requires Node 12.0 or higher as pointed out by adamwathan.

Windows user can install the node version manager and use it like so:

nvm install 12
nvm use 12

Hello,
Thank you for this very nice one page template.
I am having issues using html

For example, this gets omitted

<img src="https://github.com/favicon.ico" width="48">

Even simpler things get also omitted.
Using inspect element in my browser I see
raw HTML omitted

Appreciate any help, I am trying to use html to control the width of some images I added to the landing page.
Using md to do so like ![](images/example.png){width="70"} doesn't work as expected, the image gets displayed at native width and {width = "70"} appears as normal text.

Viewing the example site https://hugo-product-launch.netlify.app/ on two different Android phones running Chrome, the picture man holding leaf does not show.

Using Safari on an iPad works fine.

Using Chrome and Firefox on Ubuntu works fine.

Hi, I must be missing something because I can't see how to configure the contact form?

Goal: content management w/o GitHub - plus a live preview

• Enable anybody to edit the contents of their hugo-product-launch-site, even w/o a GitHub Account.
• https://forestry.io supports live previews while editing _index.md.

see https://tina.io/docs/forestry/overview/

I think I must be missing something (again). The site looks fine locally, but when I build and deploy to S3 it looks terrible. All the CSS seems to be missing - what am I doing wrong?

I started using Hugo today, this is the first template I tested.

According to readme:

Simply copy over the contents of the exampleSite-directory included in this theme

Static site (in public folder) build in this way has broken CSS link (starts from http://examplesite.com/...) I solved this by using relative path in styling.html file:

<link href=".{{ $css.RelPermalink }}" rel="stylesheet" />

I think that could be helpful for beginners :)

I am trying out https://github.com/janraasch/hugo-product-launch-kickstart, is this example meant to work out of the box just running

hugo server

I am getting the following errors so I am not sure if this example requires additional customisation before it will work

Start building sites … 
Built in 12 ms
Error: Error building site: "/data1/nyue/temp/hugo/hugo-product-launch-kickstart/content/_index.md:21:1": failed to extract shortcode: template for shortcode "contact_form" not found

Cheers

Is it possible to change this?

Hello,

I've followed your guide to setup the example site for testing. If I start hugo server everything is fine and I get a css file with several thousand lines.

But if I render the page with hugo, the css is incomplete:

• Its name is not main.css -> It is something like main.ec19971888d6d03ee7354d70b3b1b70cc3cf5ee8e7c34f98ddedd7348dd4c32b.css
• Its content is incomplete.
• The webpage clearly shows that css is missing something:

I am using hugo version 0.74.3 and npm 6.14.8. Am I missing something?