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 theTailwindCSS 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 nodejsFor Ubuntu based distros you can install Node fromNodeSource:
$ curl -fsSL https://deb.nodesource.com/setup_16.x | sudo -E bash -$ sudo apt-get install -y nodejsSetup 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 ~/CodeCreate a folder of us to work in and cd into that.
$ mkdir tailwind$ cd tailwindInitialize the directory for NPM. This will create apackage.json file within the folder.
$ npm init -yNow install TailwindCSS.
$ npm install tailwindcssTo finish off this environment, lets create asrc andpublic folder. You can name these folders whatever you want.
$ mkdir src publicGenerating the TailwindCSS CSS file
Next lets create a style.css file.
$ touch src/style.cssThen, using your preferred text editor, add the@tailwind directives so your style.css file looks like this:
@tailwind base;@tailwind components;@tailwind utilities;Now, open thepackage.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" }}Finally, create atailwind.config.js file in your project root folder containing the following.
module.exports = { content: ["./public/**/*.{html,js}"], theme: { extend: {}, }, plugins: [],}Remember the "dev" script that we added into thepackage.json file? Now we're going to run it in a separate terminal.
$ npm run devThis 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 thisblog 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 thenpm 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">Enjoy the new setup and happy coding!
Top comments(0)
For further actions, you may consider blocking this person and/orreporting abuse
