The tailwindcss Logo

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)
    "./*.{html,js}"
  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.

Een reactie achterlaten

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *

Deze website gebruikt Akismet om spam te verminderen. Bekijk hoe je reactie-gegevens worden verwerkt.