Different Ways to Install TaiwindCSS
In this blog, we will learn about different ways to install TailwindCSS in your HTML, React.js, and Next.js Project
Self-taught Developer with over 2 years of experience in developing websites. I want to help clients build websites with technologies like ๐ฅ๐ฒ๐ฎ๐ฐ๐.๐ท๐, ๐ก๐ฒ๐ ๐.๐ท๐, ๐ฎ๐ป๐ฑ ๐ง๐ฎ๐ถ๐น๐๐ถ๐ป๐ฑ๐๐ฆ๐ฆ to make their websites fast, and UX-friendly. I also love teaching the things I learn, so I also blog my learnings in a way for people with little knowledge to consume.
Web-Developer: Made over ๐ฑ+ ๐ฝ๐ฟ๐ผ๐ท๐ฒ๐ฐ๐๐ on web development with a range of technologies including Reactjs, Nextjs, TailwindCSS, Bootstrap, Redux, ContextAPI, etc.
I believe in Learning by building and so I love applying what I learned to help clients build premium websites with the latest technologies to give their end-users the best experience possible. Additionally, I also love watching anime and playing online video games.
Feel free to connect with me: Email: jhaladevrajsinh11@gmail.com
To initialize the TailwindCSS in your HTML project there are two ways which will be discussed below:
Play CDN:
Play CDN allows you to write TailwindCSS styles without installing anything! You just have to include this line: in the head tag of your HTML.
You can also customize the TailwindCSS by writing the following code in the script tags:
<script>
tailwind.config = {
theme: {
extend: {
colors: {
clifford: '#da373d',
}
}
}
}
</script>
Don't worry if you find this code difficult to understand, we will look into customization in grave detail. I have taken this code from the official TailwindCSS Documentation. You can also refer to it for the same.
Please note that TailwindCSS does not advise to use PlayCDN in production, this can be used for Development purpose only.
Now let's look into the method we can use for TailwindCSS in production as well as development.
Using Tailwind CLI:
To use this, you must have Node.js installed in your system. You can install it from the Node.js Website.
Now that you have Node.js installed you can follow the following steps:
Make a folder for your TailwindCSS project
Make a folder name src and create 2 files:
index.html
style.css
Open the terminal in your folder location and type
npm init -y. This will initialize a Node.js project without much informationThen type the following commands:
npm install -D tailwindcss
npx tailwindcss init
These commands are taken from the official documentation only, So now let's understand what each command is doing.
The first command installs tailwindcss as a dev dependency (-D indicates dev dependency). The second command initializes a tailwindcss project in your directory.
Now configure your tailwind paths in the tailwind.config.js via the below code (Clear the file and paste the below code):
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
}
Now add the following code to your style.css file
@tailwind base;
@tailwind components;
@tailwind utilities;
Now in your terminal, run the following command:
npx tailwindcss -i ./src/style.css -o ./dist/output.css --watch
This command watches the changes in your HTML file and builds it accordingly
- Now in your HTML file add the
linktag mentioned below
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="/dist/output.css" rel="stylesheet">
</head>
<body>
<!-- Some HTML Code -->
</body>
</html>
Now every time you make changes to the HTML, the website will build accordingly
If you are using VSCode or any editor, then you can install the following extensions:
Live Server
Tailwind Intellisense
Live Server creates a server for your HTML file and rebuilds it every time you make some changes to it. Tailwind Intellisense gives you suggestions for tailwind utility classes so you don't have to remember the classes
Now that we have looked at the installation for HTML, let's look at the installation for React.js and Next.js projects as well
React.js
You can type the following commands in your shell to install tailwindcss in your React.js project
npx create-react-app tailwind-tutorial
cd tailwind-tutorial
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init
After creating the project you can go to tailwind.config.js and modify the content: line as follows
Configure tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/**/*.{js,jsx}"],
theme: {
extend: {},
},
plugins: [],
}
@tailwind base;
@tailwind components;
@tailwind utilities;
Next.js
Simply run this command in your terminal and all the things will get done for you!
npx create-next-app -e with-tailwindcss my-project
