DEV Community

Skriptmonkey
Skriptmonkey

Posted on • Originally published at experiencednovice.dev

TailwindCSS: Quick Setup

#tailwindcss #html #css #web

Introduction

TailwindCSS is a utility-first CSS framework that allows you to style your HTML without needing to leave your HTML file. Most of the styling is done though pre-defined CSS classes. This results in a very easy system to use when adding style to your website.

This quick setup guide will get you to a point where you can start writing HTML and adding in CSS as you go.

If you're in a bit hurry and willing to sacrifice some features you can use the TailwindCSS CDN.

Installing Node.js

This guide is written with Linux in mind but you can also install Nodejs on Windows and Mac.

For RHEL based distros (Fedora, CentOS, Rocky Linux, etc..):

$ sudo dnf install nodejs
Enter fullscreen mode Exit fullscreen mode

For Ubuntu based distros you can install Node from NodeSource:

$ curl -fsSL https://deb.nodesource.com/setup_16.x | sudo -E bash -
$ sudo apt-get install -y nodejs
Enter fullscreen mode Exit fullscreen mode

Setup the Project environment

Now that we have Node installed, lets create our project environment.

First, cd into your workspace. I like to use ~/Code as my main local workspace.

$ cd ~/Code
Enter fullscreen mode Exit fullscreen mode

Create a folder of us to work in and cd into that.

$ mkdir tailwind
$ cd tailwind
Enter fullscreen mode Exit fullscreen mode

Initialize the directory for NPM. This will create a package.json file within the folder.

$ npm init -y
Enter fullscreen mode Exit fullscreen mode

Now install TailwindCSS.

$ npm install tailwindcss
Enter fullscreen mode Exit fullscreen mode

To finish off this environment, lets create a src and public folder. You can name these folders whatever you want.

$ mkdir src public
Enter fullscreen mode Exit fullscreen mode

Generating the TailwindCSS CSS file

Next lets create a style.css file.

$ touch src/style.css
Enter fullscreen mode Exit fullscreen mode

Then, using your preferred text editor, add the @tailwind directives so your style.css file looks like this:

@tailwind base;
@tailwind components;
@tailwind utilities;
Enter fullscreen mode Exit fullscreen mode

Now, open the package.json file and add a new command to the scripts. The file should look like this.

{
  "name": "tailwind",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "tailwind build -i src/style.css -o public/tailwind.css --watch"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "tailwindcss": "^3.0.1"
  }
}
Enter fullscreen mode Exit fullscreen mode

Finally, create a tailwind.config.js file in your project root folder containing the following.

module.exports = {
  content: ["./public/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}
Enter fullscreen mode Exit fullscreen mode

Remember the "dev" script that we added into the package.json file? Now we're going to run it in a separate terminal.

$ npm run dev
Enter fullscreen mode Exit fullscreen mode

This command will continue to run while you write your HTML. It will "watch" and "rebuild" your tailwind.css file as new utility classes are added into your HTML file. If you'd like to learn more about the Just-in-Time engine, check out this blog post.

You should now have a new tailwind.css file in the public folder. link this file into your HTML file and start coding away. Remember to keep the npm run dev command running in a separate terminal.

Using the style.css file

Now you can use the style.css file by adding a link tag into the <head> of your html source file.

<link href="./style.css" rel="stylesheet">
Enter fullscreen mode Exit fullscreen mode

Enjoy the new setup and happy coding!

Top comments (0)

Read next

samuellubliner profile image

CSS Styling (Next.js)

Samuel Lubliner -

rodrigoantunes profile image

Crafting interactive reactions similar to Google Meet using HTML, CSS, and Vanilla JavaScript

Rodrigo Antunes -

anurag1802 profile image

Todo App Frontend Mentor Solution

Anurag Mohanty -

leemeganj profile image

Exploring Catalyst, Tailwind's UI kit for React

Megan Lee -