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:
npm init -y
npm install tailwindcss postcss-cli autoprefixer
npx tailwind init
touch postcss.config.js
- Added code: module.exports ={ plugins: [ require(βtailwindcssβ), require(βautoprefixerβ), ] }
mkdir css
-
touch css/tailwind.css
Added:- @tailwind base; @tailwind components; @tailwind utilities; - In βpackage.jsonβ, modified the entry of βtestβ with: βscriptsβ: { βbuildβ: βpostcss css/tailwind.css -o public/build/tailwind.cssβ },
npm run build
- 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)
Top comments (0)