Day 1 & 2: Learning about Tailwind CSS

Ok, I was watching a video or two on Friday seeing how Tailwind CSS works as

• Being looking for alternative to Bootstrap (I hear 5.0 is in alpha and was super excited about it… until remember the bloat)
• Mick (my other half) suggested to look at Tailwind CSS as he’s been looking into it himself.
• Tailwind CSS is more utility-based and I like that it’s lot less div wrapping divs and more friendlier to coders (who are not designers)
• Customise - FTW
• Never used node before… so this is new for me

Setting Up Tailwind and PostCSS (screencast)

👉 Setting up Tailwind and PostCSS - Tailwind CSS

Steps from the screencast recap:

1. npm init -y
2. npm install tailwindcss postcss-cli autoprefixer
3. npx tailwind init
4. touch postcss.config.js
5. Added code: module.exports ={ plugins: [ require(‘tailwindcss’), require(‘autoprefixer’), ] }
6. mkdir css
7. touch css/tailwind.css Added:- @tailwind base; @tailwind components; @tailwind utilities;
8. In “package.json”, modified the entry of “test” with: “scripts”: { “build”: “postcss css/tailwind.css -o public/build/tailwind.css” },
9. npm run build
10. Create index.html in “public” folder - link to “tailwind.css”

The following is optional, run a small live server to view the changes

• If it’s not installed:- npm install -g live-server
• live-server public

The screencasts from their site is quite good, I’ll probably (hopefully) write things that I found amazing, and won’t write every step I did from their screencasts. It's pretty straight forward, and loving it being utility-based. The coder in me feels much happier.

👉 Designing with Tailwind CSS - Tailwind CSS

Right now, my leanings are towards using Tailwind CSS instead of upgrading one of my sites to Bootstrap5 when it comes out, and yep, it’s in Alpha right now.

👉 Bootstrap 5 alpha! | Bootstrap Blog)

The interesting part comes when I actually start porting one of my sites to using Tailwind CSS, it badly needs a revamp:

• Django (can't even remember what version, it's that long since I looked at it) - it'll probably be a big upgrade, although it should be painless. 🤞🏼 I've done a big, big upgrade before many yonks ago, and it wasn't too bad. Instead I was fighting with so many changes Heroku brought in, that I don't use it to deploy anymore, plus it would have started to become expensive for me to use, especially for a not-for-profit site. 😅
• Bootstrap 3 (yeah, I'm still using a really old version of Bootstrap, so jelly of some of the new features in Bootstrap 4)