DEV Community

Cover image for Back from the Break: Lessons Learned While Prepping 4IR Quest (Tailwind, Meta Tags, JS & More)
Xion Apex Academy
Xion Apex Academy

Posted on

Back from the Break: Lessons Learned While Prepping 4IR Quest (Tailwind, Meta Tags, JS & More)

#webdev #tailwindcss #seo #beginners

Web Development Tips I Wish I Knew Earlier 🚀

Hey everyone — hope you're all doing well!

Creator X here. I know it's been a while since my last post — I've been quite ill and needed some time off. But I'm back, and I'm really curious how all your projects are going!

Originally, I was going to talk about a project called 4IR Quest, but I'll save that for a follow-up. Today, I want to share a few beginner-friendly lessons I've learned while preparing for its prelaunch — especially things I wish I knew earlier.

This post is for anyone getting started with web development or working on their own site or portfolio.

🌀 1. Tailwind CSS: The Struggle Was Real

I've worked on quite a few web projects before and thought I had a good grasp of things — but then Tailwind CSS entered the chat 😅.

Installing it seemed straightforward according to the docs and tutorials, but I kept hitting this error:

bash: ./node_modules/.bin/tailwindcss: No such file or directory
Enter fullscreen mode Exit fullscreen mode

What finally worked for me: 

rm -rf node_modules
rm -f package-lock.json
npm install -D tailwindcss postcss autoprefixer
./node_modules/.bin/tailwindcss init -p
Enter fullscreen mode Exit fullscreen mode

Also, check your environment:

node -v
npm -v
Enter fullscreen mode Exit fullscreen mode

If everything goes well, you'll get:

Created Tailwind CSS config file: tailwind.config.js
Created PostCSS config file: postcss.config.js
Enter fullscreen mode Exit fullscreen mode

Setting up your project:

Create a src/input.css and add:

@tailwind base;
@tailwind components;
@tailwind utilities;
Enter fullscreen mode Exit fullscreen mode

In package.json:

"scripts": {
  "build:css": "tailwindcss -i ./src/input.css -o ./dist/output.css",
  "watch:css": "tailwindcss -i ./src/input.css -o ./dist/output.css --watch"
}
Enter fullscreen mode Exit fullscreen mode

✅ Use npm run watch:css while developing

✅ Use npm run build:css for production output

Thanks to my students who taught me this difference. 🙏

🧩 2. Tailwind Config Confusion

Here's what a working tailwind.config.js looks like:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./*.html",
    "./src/**/*.html",
    "./src/**/*.{js,jsx,ts,tsx}",
    "./*.js",
  ],
  theme: {
    extend: {
      colors: {
        'xion-orange': '#FF6B35',
        'xion-gray': '#2D3748',
        'xion-blue': '#4299E1',
      },
      animation: {
        'float': 'float 6s ease-in-out infinite',
        'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
        'bounce-slow': 'bounce 2s infinite',
      }
    }
  },
  plugins: [],
}
Enter fullscreen mode Exit fullscreen mode

Example custom styles:

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-20px); }
}

.gradient-bg {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.glass-effect {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}
Enter fullscreen mode Exit fullscreen mode

🔍 3. Meta Tags for SEO & Sharing

I ignored these at first... until Google Search Console reminded me.

Here's a starter set of meta tags for SEO + social sharing:

<meta name="description" content="Your website's description for search engines.">
<meta property="og:title" content="Your Website Title">
<meta property="og:description" content="Your website's description.">
<meta property="og:image" content="https://your-site.com/social-preview.jpg">
<meta property="og:url" content="https://your-site.com">
<meta name="twitter:card" content="summary_large_image">
Enter fullscreen mode Exit fullscreen mode

Even if you're just starting out, it's worth adding!

🔐 4. JavaScript Obfuscation (Yes, It's a Thing & learning about it)

If you're using plain JS, you might want to minify or obfuscate it.

Some tools that helped me:

  • 🧰 Toptal JS Minifier
  • 🧪 ByteHide JS Obfuscator

I also built simple scripts like build.js and build.production.js to manage this process.
You can also check out the article on Medium by Josh Gates called Step 6: Javascript Obfuscation. He shows step by step.

🛠 5. Planning Projects Better

Here are the questions I now ask before starting a project:

  • ✅ Do I need Tailwind?
  • 🧠 Will I use React, Vite, or plain HTML/CSS/JS?
  • 🔐 Should I obfuscate my JavaScript?
  • 🧰 What tools will I use?
  • 🧱 Do I need a backend?

My advice: start small, work from the inside out. Plan your strategy, then build.

🔁 Wrapping Up

Thanks for reading! I hope this helps some of you avoid the headaches I ran into while setting up. 😅

I'll be posting again soon — diving into my upcoming project: 4IR Quest — and another surprise project too 👀

Drop a comment and say hi, share your thoughts, or let me know what you're working on!

Until next time,

– Creator X 👾

What web development challenges have you faced recently? Share your experiences in the comments below!

Top comments (0)