It's pretty straight forward to setup Tailwind CSS and give it a test spin using the CDN version. However, as mentioned on the Tailwind site, you need to setup Tailwind using npm in order to start customising Tailwind.
*Note: This starter template is for Tailwind CSS version 1 beta 3 (which is pretty much the final version)
If you want the starter template for version 0.7.4, then please download it from here*
- Download Node/npm
- Download the Tailwind Starter Template
- Open
package.jsonand then edit the follow section of the file to match your project
"version": "1.0.0",
"description": "Tailwind Starter Template",
"license" : "MIT",
"repository": {
"type" : "git",
"url" : "https://github.com/tailwindtoolbox/StarterTemplate.git"
},
Refer to https://docs.npmjs.com/files/package.json for guidance
-
Open your node command prompt/terminal and navigate to your 'project-name' folder and create the
node_modulesdirectorynpm install or npm update -
Refresh the Tailwind.js file
npm run del:js && npm run create:js -
Re-create the initial css file
npm run dev:css -
Start building your website using the starter template in the dist folder.
- Customise the tailwind.config.js and tailwind.config.css to create the tailwind.css for your project
- Use purgecss/cssnano to remove unused CSS and minify the final CSS file
Refer to the full setup guide for detailed instructions
Have a bug, suggestion or question? Open a new issue here on GitHub.
Tailwind Toolbox was created by and is maintained by Amrit Nagi, Co-owner of Astrava.Solutions.
- https://twitter.com/tailwindtoolbox
- https://twitter.com/amritnagi
- https://github.com/tailwindtoolbox
Tailwind Toolbox is based on the Tailwind CSS framework created by Adam Wathan, Jonathan Reinink, David Hemphill and Steve Schoger