Tailwind CSS Setup
There are several ways to set up Tailwind CSS in your project, depending on your setup and the tools you're using. Here are a few of the most common ways to get started:
1.CDN
Using a CDN: One of the easiest ways to get started with Tailwind is by using a Content Delivery Network (CDN). You can include the Tailwind CSS stylesheet in the <head> of your HTML file using a link tag. You will have to include this link in every HTML file you want to use tailwind. This is the quickest way to get started, but it's not recommended for production use because it doesn't allow you to customize the framework's defaults.
<link href="https://unpkg.com/tailwindcss@1.x.x/dist/tailwind.min.css" rel="stylesheet">
2.NPM
Most of tailwind project build using npm, this allows you to customize the framework's defaults and integrate it into your build process. You will have to have Node.js and npm installed on your machine (you can google it first if you don't have Node.js installed on your device), then you can install Tailwind CSS by running the following command in your terminal:
1.Create new folder and name it with your project name
and execute this command at the root folder
npm install -D tailwindcss
2.Create tailwind.config.js with this command
npx tailwindcss init
3.Setup the tailwind.config.js:
Add the paths to all of your template files in your tailwind.config.js file
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
}
4.Add the Tailwind directives to your CSS
Create input.css in the src folder Add the @tailwind directives for each of Tailwind’s layers to your main CSS file.
@tailwind base; @tailwind components; @tailwind utilities;
and the folder structure will be like this
FolderProject
-src
-dist
output.css
index.html
input.css
tailwind.config.js
5.Start the Tailwind CLI build process
Run the CLI tool to scan your template files for classes and build your CSS.
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch
6.Start using Tailwind in your HTML
Add your compiled CSS file to the <head> and start using Tailwind’s utility classes to style your content.
<!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>
<h1 class="text-3xl font-bold underline">
Hello Tecnogaku!
</h1>
</body>
</html>
Once you've installed Tailwind CSS, you can use it to style your HTML elements. You can use the pre-defined classes provided by the framework to quickly build and customize your layout. You may have to configure your build setup to be able to use the classes, such as using postcss to process your CSS files.
Tailwind CSS is a powerful utility-first framework that can help you create fast-loading, responsive, and accessible websites. It's easy to set up and use, and provides a wide range of pre-defined classes that you can use to quickly build and customize your layout.
What to read next?
Get familiar with some of the core concepts that make Tailwind CSS different from writing traditional CSS. We will be back with another tailwind css tutorial.
--
yeah here it is: How to create tailwind project under 30 sec let's go!
