Tailwind Blog

Swap-Nova

Introduction to some of the basic utility classes, including the sizing and spacing properties, backgrounds and common text styling utility classes in tailwind css.

Demo Download

Goal of this project:

Explain how the spacing and sizing classes work
Style backgrounds and texts quickly using utility classes
Build a simple web page with Tailwind CSS

Setting up the workplace:

npm -y init

Now, we will install the tailwind CLI tool as a devDependency, which means that the Tailwind CLI tool is a package only required during the development. Enter the following command in your terminal.
```
npm install -D tailwindcss
```
The terminal will load the installation of the packages. Now, open your package.json file and check that 'tailwindcss' appears as a devDependency, which you should find in lines 12 and 13.
Now that the Tailwind CLI tool is installed, we can run it by entering the following command in your terminal.
```
npx tailwindcss init
```
In the tailwind.config.js file, update the “content” property in line 3 with the following code:
```
content: ["./src/**/*.{html,js}"],
```

Finally, enter the following code in the input.css file.

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

How to start Tailwind: We need to build the utility classes using the Tailwind CLI Tool. Open the terminal and enter the following command:
```
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch
```

PS: The terminal will now rebuild only the utility classes used in your code every time you save new changes. Thereafter, leave your terminal open during your development.

Top categories