Improving the "installation instructions" onboarding journey

[jenstornell]

I've read the installation instructions for Tailwind and to me it gives about the half of the information that I need (missing steps). However, this video is brilliant:

https://tailwindcss.com/course/setting-up-tailwind-and-postcss

Install - How I prefer it to be

Install NodeJS

Install NodeJS.

Create package.json

Create a package.json in the terminal.

npm init -y

Install packages

Install the packages you need.

npm install tailwindcss postcss-cli autoprefixer

Create a postcss.config.js

Create a file in your root called postcss.config.js.

Edit the file and include required libraries.

module.exports = {
  plugins: [require("tailwindcss"), require("autoprefixer")],
};

Create a tailwind.css

Create for example the file css/tailwind.css and edit that file like below.

@tailwind base;
@tailwind components;
@tailwind utilities;

Edit your package.json

Find the row where it says "scripts". Change it so it looks similar to below.

"scripts": {
  "build": "postcss css/tailwind.css -o public/build/tailwind.css"
},

Try it out

Now you're done! Try to generate a CSS file by the command below.

npm run build

You should now have a new CSS file at public/build/tailwind.css which you can include in your HTML.

[simonswiss]

That's great feedback, thank you!

We're going to do some work on the "installation guides" fairly soon, so this is good to have in consideration. 👍

[jenstornell]

Thanks!

Also considder implementing something similar to this guide about PurgeCSS:

Tailwind 1.4 - Setup with PurgeCSS [Guide]