Tag: npm

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!

---

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: