Web Dev Roadmap for Beginners (Free!): https://bit.ly/DaveGrayWebDevRoadmap
In this Tailwind CSS config and deploy tutorial we will look at some config settings in more detail and deploy our Tailwind project to Github and Render.com to share it with the world.
Become a full-stack web dev with Zero To Mastery Courses:
- The Complete Web Developer: https://bit.ly/WebDevMaster
- The Complete Web Designer: https://bit.ly/CompWebDesign
- Junior to Senior Dev Roadmap: https://bit.ly/WebDevRoadmap-JrtoSr
Subscribe https://bit.ly/3nGHmNn
Course Updates https://courses.davegray.codes/
Questions - Please post them to my Discord https://discord.gg/neKghyefqh
Buy Me A Coffee https://www.buymeacoffee.com/davegray
Follow Me On Social Media:
Github: https://github.com/gitdagray
Twitter: https://twitter.com/yesdavidgray
LinkedIn: https://www.linkedin.com/in/davidagray/
All Resources for this Tailwind CSS Course: https://github.com/gitdagray/tailwind-css-course
Playlist for this Tailwind CSS Course: https://bit.ly/3BKYrzg
Tailwind CSS Config and Deploy Tutorial
(00:00) Intro
(00:05) Welcome
(00:16) Starter Code
(00:47) Start tailwindcss
(01:22) Media Query Adjustment
(04:53) Content File Paths
(09:51) Extending Your Theme
(15:26) Send Project to Github
(19:37) Deploy to Render.com
(25:46) Next Steps
Suggested Pre-requisites for this Tailwind CSS course:
HTML for Beginners full course: https://youtu.be/mJgBOIoGihA
CSS for Beginners full course: https://youtu.be/n4R2E7O-Ngo
Tutorial References:
Tailwind CSS: https://tailwindcss.com/
Prettier: https://www.npmjs.com/package/prettier
Automatic Class Sorting with Prettier: https://tailwindcss.com/blog/automatic-class-sorting-with-prettier
git: https://git-scm.com/
Github: https://github.com/
Render: https://render.com/
Web Dev Tools:
Chrome Browser: https://www.google.com/chrome/
Node.js: https://nodejs.org/
Visual Studio Code (VS Code): https://code.visualstudio.com/
Live Server VS Code Extension: https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer
Tailwind CSS Intellisense VS Code Extension: https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss
Inline Fold VS Code Extension: https://marketplace.visualstudio.com/items?itemName=moalamri.inline-fold
Was this tutorial about configuring and deploying a Tailwind CSS project helpful? If so, please share. Let me know your thoughts in the comments.
#tailwind #css #deploy