Tailwind CSS/JIT - Vite - Node.js - npm - NVM for Windows - GitHub - Netlify

7 Просмотры

A very impromptu video demonstrating one way of setting up and installing Tailwind CSS and its new Just-in-Time compiler. We get things rolling by ins...

Дата загрузки:2021-04-04T23:45:12+0000

Издатель
A very impromptu video demonstrating one way of setting up and installing Tailwind CSS and its new Just-in-Time compiler. We get things rolling by installing Node Version Manager (nvm) for Windows, installing the current Node.js LTS, along with Node Package Manager and demonstrate installing the various Tailwind packages, using the npm. Continuing on, we set up Tailwind CSS and Post CSS configs, to purge excess unused CSS classes and we talk about running npm scripts from our package.json. Using the Vite bundler, we build our example Tailwind based landing page website and as a bonus we create a Git repository with .gitignore to ignore the node_modules directory et al, committing our changes using GitHub Desktop and pushing everything up to the repo we created on GitHub.com. Finally, we deploy everything we just built, pulled over from GitHub, via Netlify and watch as it does its magic, building our site using the same build script and setup we implemented locally.


Note: this is a fairly large topic with lots on ins and outs and different ways of implementing the various tooling for all the various frameworks, some of which are all fairly new. I did my best to keep a not so simple topic simple (enough; I hope) and this in a very short amount of time, with the time I had available, basically unrehearsed so, hopefully with that being said it's still clear and helpful at the same time.


Of course, there is much to learn on one's own, as this is a fairly dynamic workflow, that doesn't have always a single source of truth, if you will and I'm always learning too, but if you have any questions, let me know in the comments.

---

Tailwind CSS: https://tailwindcss.com
Tailwind CSS JIT: https://blog.tailwindcss.com/just-in-time-the-next-generation-of-tailwind-css
GitHub: https://github.com
GitHub Desktop: https://desktop.github.com
Netlify: https://www.netlify.com
Node.js: https://nodejs.org
NVM for Windows: https://github.com/coreybutler/nvm-windows
NVM: https://github.com/nvm-sh/nvm
npm init: https://docs.npmjs.com/cli/v7/commands/npm-init
Vite: https://vitejs.dev
Post CSS: https://postcss.org
VS Code: https://code.visualstudio.com
VS Code Theme - Cyberpunk UMBRA Protocol: https://marketplace.visualstudio.com/items?itemName=max-SS.cyberpunk
Rainblur Landing Page: https://www.tailwindtoolbox.com/templates/rainblur-landing-page
Категория
Создание сайта
Комментариев нет.