Simple Tailwindcss starter guide

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.

  1. Install Node.js on your machine.
  2. Run npm init -y to create a package.json file.
  3. Next we execute npm install -D tailwindcss to install the Tailwind dependency.
  4. Next, we need to run npx tailwindcss init to create a tailwind.config.js file.
  5. 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)
  6. Create an input.css file and paste the following in it:

    @tailwind base;
    @tailwind components;
    @tailwind utilities;
  7. 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"
  8. You can now run these scripts using npm run watch. Make sure to run the npm run build command right now!

Picture 1: the basic Tailwindcss config file.
Picture 2: running scripts defined in the tailwind.config.js file.

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:

Picture 3: changes to h1 using directives and at-rules.

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

Picture 4: adding custom classes to the component directive.

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

Picture 5: add a spacing parameter 128 and give it the value 32rem.
Picture 6: retrieve the spacing value for 128.

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

Picture 7: style media breakpoints in one go.