**What I've learned on Tailwind, css My notes and research**
Tailwind CSS is a utility-first CSS framework that makes it easy to build custom designs quickly and efficiently. As a beginner, it might look overwhelming at first, but it’s quite simple once you get the hang of it. Here's a step-by-step guide to get one started with Tailwind CSS:
Step 1: Understanding Tailwind CSS
Tailwind CSS works differently than traditional CSS frameworks like Bootstrap. Instead of providing pre-built components (like buttons or modals), it gives you a set of utility classes. These utility classes let you control the layout, design, and spacing of your elements directly in your HTML.
For example:
text-center: Centers the text.
bg-blue-500: Sets a blue background color.
p-4: Adds padding of 1rem.
m-2: Adds margin.
The key idea is that Tailwind allows one to style elements directly in the HTML rather than writing a bunch of custom CSS.
Step 2: Setting Up Tailwind CSS
There are a few ways to set up Tailwind CSS depending on our project structure.
Option 1: Using Tailwind via CDN (Quick Setup)
This is the easiest way to start experimenting with Tailwind. Simply include the Tailwind CSS file via a CDN link.
Create an index.html file. (Just created a simple example on vs code and pasted here.)
Add the following <`link`> tag inside the <`head`> of your HTML file:
<!DOCTYPE html>
<`html lang="en"`>
<`head`>
<`meta charset="UTF-8"`>
<`meta name="viewport" content="width=device-width, initial-scale=1.0"`>
<`title`>Tailwind CSS<`/title`>
<`script src="https://cdn.tailwindcss.com"`><`/script`>
<`/head`>
<`body`>
<`div class="p-4 bg-blue-500 text-white"`>
Hello, Tailwind!
<`/div`>
<`/body`>
<`/html`>
That's it! You now have Tailwind set up via CDN, and you can start using its classes right away in your HTML.
Option 2: Using Tailwind with NPM which is my personal pick. (Advanced Setup)
When you want to use Tailwind in a more complex project (such as with React, Vue, or other JS frameworks), it’s better to install it via NPM.
First, one need to initialize a new project using the terminal.(if you haven’t already):
mkdir tailwind-project (which means make directory "tailwind-project")
cd tailwind-project (opening the project)
npm init -y (npm initialization "yes")
Install Tailwind CSS and its dependencies:
npm install tailwindcss postcss autoprefixer
Create a configuration file for Tailwind:
npx tailwindcss init
Create a postcss.config.js file in the root directory:
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
Create a src folder and inside it, create a styles.css file.
Add the following code to your styles.css:
@tailwind base;
@tailwind components;
@tailwind utilities;
Now, create a build folder and add a script in package.json to compile your Tailwind CSS:
"scripts": {
"build": "tailwindcss build src/style.css -o dist/style.css"
}
Run the build process to generate your CSS:
npm run build
Link the generated CSS in your HTML file:
<`link rel="stylesheet" href="dist/styles.css"`>
Now, you can start using Tailwind classes in your HTML files.
Step 3: Basic Tailwind CSS Concepts
1. Utility Classes
Tailwind is based on utility classes that you apply directly to your HTML elements. Some common utility classes include:
Typography:
text-xl, text-2xl, font-bold
Colors:
bg-red-500, text-white, border-gray-400
Spacing:
m-4 (margin), p-4 (padding)
mt-4 (margin top), px-8 (horizontal padding)
Layout:
flex, grid, justify-center, items-center
w-1/2, h-32, min-w-full
2. Responsiveness
Tailwind allows you to create responsive designs with ease by applying different classes for different screen sizes. Tailwind uses a mobile-first approach.
Example:
<`div class="p-4 md:p-8 lg:p-12"`>
This element has different padding on small, medium, and large screens.
<`/div`>
md:p-8 applies padding on medium screens (768px and above).
lg:p-12 applies padding on large screens (1024px and above).
3. Customizing Tailwind
You can customize Tailwind to fit your design needs. For example, you can modify colors, fonts, spacing, etc., in the tailwind.config.js file.
Example of customizing colors:
module.exports = {
theme: {
extend: {
colors: {
customBlue: '#1e3a8a',
customGreen: '#10b981',
},
},
},
}
Step 4: Building Layouts
With Tailwind, you can easily build complex layouts using utility classes.
Example 1: Basic Flexbox Layout
<`div class="flex space-x-4"`>
<`div class="bg-gray-200 p-4 w-1/3"`>Item 1<`/div`>
<`div class="bg-gray-200 p-4 w-1/3"`>Item 2<`/div`>
<`div class="bg-gray-200 p-4 w-1/3"`>Item 3<`/div`>
<`/div`>
flex: makes the container a flexbox.
space-x-4: adds horizontal spacing between the child elements.
Example 2: Centering Content
<`div class="flex items-center justify-center h-screen"`>
<`div class="bg-blue-500 text-white p-8"`>Centered Box<`/div`>
<`/div`>
items-center: vertically centers content.
justify-center: horizontally centers content.
h-screen: makes the container take the full height of the screen.
Step 5: Tailwind CSS Resources
Official Documentation: Tailwind CSS Docs
The official docs are well-organized and provide examples for each utility class and feature.
Tailwind Play: Tailwind Play — An online editor for trying out Tailwind code without setting up a project.
Thats all for now!
Hope you gained knowledge.
Sign in with Wallet
Connect another wallet