A very small guide to Tailwindcss and how to get started.
Installation of Tailwindcss in a new project
First of all: the official documentation can be found here.
- Install Node.js on your machine.
- Run
npm init -y
to create a package.json file. - Next we execute
npm install -D tailwindcss
to install the Tailwind dependency. - Next, we need to run
npx tailwindcss init
to create a tailwind.config.js file. - Next step is to add the following line to the content section to the tailwind.config.js file, under the module.experts content section. (see picture 1)
"./*.{html,js}"
- Create an input.css file and paste the following in it:
@tailwind base;
@tailwind components;
@tailwind utilities;
- Add the following scripts to the
package.json
file (see picture 2):"build": "tailwindcss -i ./input.css -o ./css/style.css",
"watch": "tailwindcss -i ./input.css -o ./css/style.css --watch"
- You can now run these scripts using
npm run watch
. Make sure to run thenpm run build
command right now!


Add some tweaks to Tailwindcss
Directives and functions
You can add your own at-rules do simply add your customization to the directives. Create combinations and add them to the respective directive like this:

You can also combine existing Tailwind classes and create a new component:

Furthermore, you can use parameters in your tailwind.config.js file and later retrieve those values from CSS:


You can also use this for your media breakpoints, for example:
