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.
npm init -yto create a package.json file.
- Next we execute
npm install -D tailwindcssto install the Tailwind dependency.
- Next, we need to run
npx tailwindcss initto 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)
- Create an input.css file and paste the following in it:
- Add the following scripts to the
package.jsonfile (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 the
npm run buildcommand 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: