May 06, 2020 in Tailwind css

Ik ben onlangs beginnen experimenteren met Tailwind CSS en dit nieuwe framework biedt een hoop mogelijkheden. In twee filmpjes geef ik een introductie.

(filmpjes onderaan de blogpost)

Handige links:

Installatie

Tailwind css is een CSS framework dat niet opinionated is. Je kan er herbruikbare componenten mee aanmaken, of enkel door middel van de Tailwind classes een layout maken. Zonder CSS te schrijven dus. 

Maak een npm folder aan en run in de terminal: npm install tailwindcss

Maak een css folder aan en voeg onderstaande toe in jouw styles.css:

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

In je npm folder run npx tailwindcss init

Zo maak je je config file aan. Die ziet er zo uit:

module.exports = {
  purge: [],
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}

In principe zijn we nu klaar. Maar met deze extra stap kunnen we het builden van de css een beetje automatiseren.

In je npm folder run npm init. En klik vervolgens telkens op 'enter'. Dit zal een package.json file aanmaken. In je package.json file kan je onder "scripts" een buildscript toevoegen. In onderstaande snippet zie je hoe:

{
  "name": "npm",
  "version": "1.0.0",
  "description": "",
  "main": "tailwind.config.js",
  "dependencies": {
    "tailwindcss": "^1.4.4"
  },
  "devDependencies": {},
  "scripts": {
    "build:css": "tailwind build ../css/styles.css -o ../css/styles.build.css"
  },
  "author": "",
  "license": "ISC"
}

(indien je css structuur anders is, vergeet niet om de waardes aan te passen).

We zijn nu klaar om onze css te builden. In je npm folder in de terminal run: npm run build:css. Je krijgt nu feedback dat je layout succesvol gebuild werd. Er is nu een css/styles.build.css file.