It's pretty straight forward to setup Tailwind 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.
This guide will help beginners get to grasp with:
Huge thanks to https://flaviocopes.com/tailwind-setup/ for the excellent setup guide which helped create the starter template.
Download and install Node.js/npm
Open your node command prompt/terminal and check if you have Node.js / npm installed:
node -v and then npm -v
>>node -v
v8.12.0
>>npm -v
6.4.1
Update your npm:
npm install -g npm
>>npm install -g npm
(some npm messages)
+ npm@6.4.1
added 387 packages from 770 contributors in 86.554s
Create your 'project-name' folder and download the Tailwind-Starter zip file and extract the contents.
Download Tailwind-Starter (zip)
Open package.json and then edit the follow section of the file to match your project
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_modules` directory
npm install or npm update
>>npm update
(some npm messages)
+ cssnano@4.1.7
+ postcss-cli@6.0.1
+ tailwindcss@0.7.3
+ autoprefixer@9.3.1
+ @fullhuman/postcss-purgecss@1.1.0
added 472 packages from 355 contributors and audited 4131 packages in 122.868s
found 0 vulnerabilities
Refresh the Tailwind.js file
npm run del:js && npm run create:js
>>npm run del:js && npm run create:js
> TailwindStarterTemplate@1.0.0 del:js C:\project-name
> rimraf tailwind.config.js
> TailwindStarterTemplate@1.0.0 create:js C:\project-name
> tailwind init tailwind.config.js
tailwindcss 0.7.3
✅ Created Tailwind config file: tailwind.config.js
Create the initial css file
npm run dev:css
>>npm run dev:css
> TailwindStarterTemplate@1.0.0 dev:css C:\project-name
> tailwind build tailwind.config.css -c tailwind.config.js -o dist/css/tailwind.css
tailwindcss 0.7.3
🚀 Building... tailwind.config.css
✅ Finished in 890 ms
📦 Size: 395.04KB
💾 Saved to dist/css/tailwind.css
Start building your website using the starter template in the dist folder.
To make changes to the configuration, go to your 'project-name' folder and open tailwind.config.js and make amendments for your website (e.g. update the colour palette, fonts etc).
Refer to the Tailwind documentation for more information: Configure tailwind.js
Example: Adding two new colour classes 'primary' and 'secondary'
As your development goes on and you start getting a lot of repetition of CSS classes, you can create your own utilities and components
Refer to the Tailwind documentation for more information: Add new Utilities and Extract Components
Example: Creating a component class for a button
This will allow you to setup a button using:
<a href="#" class="btn">Click Me!</a> instead of
<a href="#" class="bg-brand text-white text-sm border-none rounded font-bold p-3 mt-2 hover:bg-teal-dark">Click Me!</a>
After any changes to tailwind.config.js and tailwind.css, you must recreate the tailwind css file in order to get the updated classes/utilities for use in your project.
Open your node command prompt/terminal run:
npm run dev:css
>>npm run dev:css
> TailwindStarterTemplate@1.0.0 dev:css C:\project-name
> tailwind build tailwind.config.css -c tailwind.config.js -o dist/css/tailwind.css
tailwindcss 0.7.3
🚀 Building... tailwind.config.css
✅ Finished in 890 ms
📦 Size: 395.04KB
💾 Saved to dist/css/tailwind.css
Once you have finalised your project you can build the final minified version (tailwind.min.css in the /dist/css folder) which will remove all of the classes which you have not used within your project.
Open your node command prompt/terminal run:
npm run build:css
>>npm run build:css
> TailwindStarterTemplate@1.0.0 build:css C:\project-name
> postcss tailwind.config.css -o dist/css/tailwind.min.css