Repo containing all the projects made in 30 Days while completing the 30 Days of JavaScript Challenge.
30daysofjs.netlify.app
Since we are using TailwindCSS, there are different ways to set it up in order to start working with this tool. However, we found it easier to star with minimum configuration boiler plate to focus on the development. So, these are the simple steps to start working with TailwindCSS in the project.
- Install NodeJs, just go to the official site and download the package for your operative system. We recommend using the LTS version.
- Clone this repo using
git clone git@github.com:alexventuraio/30DaysOfJavaScript.git. - Go to the root folder with
cd 30DaysOfJavaScript. - We have the minimum configuration for TailwindCSS to work properly but feel free to modify it on the config file
tailwind.config.js. - Since, TailwindCSS has its own CLI, we are going to use it to purge the classes we are not using from Tailwind and the JIT compiler to create our final CSS file in order to have a small file size containing only the classes we are using in the HTML. In the
package.jsonfile we have a custom command to start with, just runyarn run devornpm run devand you'll be ready to start working on the site. - Finally, you can start a live server to serve the site or just open it up manually (
index.html) on the browser.
We can deliver the final tailwind.css file to production and it will work but that is not the best practice to just leave it as for development mode.
So, we are going to minify it in order to have a smaller file size and be more appropriated for production.
- Stop any other command that you have using
ctrl + c. - We have a
package.jsonfile with two commands that use the Tailwind CLI, one of them is to minify ourassets/tailwind.cssfile, so the only thing you need to do is to runyanr run buildornpm run build. This will go over the custom CSS file generated with the required classes for our project and prepare it for production.
Note: Running the last command to minify for production is quire important for performance reasons. Note: You must run it before pushing to master to always have a ready-for-production version.
This project follows the MIT License.
Made with ♥ by Swapnil Srivastava
