TAILWIND CSS
Tailwind css can be used to style websites in the fastest and easiest way.It is utility-first CSS framework which is highly customisable.
Tailwind CSS works by scanning all of our HTML files, JavaScript components, and any other templates for class names, generating the corresponding styles and then writing them to a static CSS file.
It’s fast, flexible, and reliable — with zero-runtime.
Use of Tailwind css:
- The faster UI building process
- It is a utility-first CSS framework which means we can use utility classes to build custom designs without writing CSS as in the traditional approach
- Tailwind CSS provides a wide range of utility classes that each handle a specific styling property
- Tailwind CSS is highly customizable. We can configure various aspects of the framework, such as color palettes, spacing, breakpoints, and more. This flexibility allows us to create the framework to match your project’s specific design requirements even with out writing traditional css styles(which are bulky depending upon the size of projects).
- Tailwind CSS includes built-in responsive design utilities that allow us to easily create designs for different screen sizes.It is more like inline css but inline css cant be made responsive where as tailwind css are responisve
- Tailwind CSS integrates with PurgeCSS, a tool that removes unused CSS styles from your final production build. This helps reduce the overall file size and optimize performance.
- Tailwind CSS IntelliSense plugin includes a dedicated Tailwind CSS language mode that has support for all of the custom at-rules and functions Tailwind uses which can be used with VS Code.
Advantages:
- No more silly names for CSS classes and Id.
- Minimum lines of Code in CSS file.
- We can customize the designs to make the components.
- Makes the website responsive.
Disadvantages
- 1.Tailwind is simple and easy to understand. but it frequently involves a large number of classes in HTML. it might take some time to get the hang of all the utility class names.
- Makes the changes in the desired manner.
Installation
Tailwind css framework can be installed
- Tailwind CLI : The simplest and fastest way to get up and running with Tailwind CSS from scratch is with the Tailwind CLI tool. The CLI is also available as a standalone executable if you want to use it without installing Node.js.
- Using PostCSS : Installing Tailwind CSS as a PostCSS plugin is the most seamless way to integrate it with build tools like webpack, Rollup, Vite, and Parcel.
- Framework Guides : Framework-specific guides that cover tailwind’s recommended approach to installing Tailwind CSS in a number of popular environments. Node.js have to be installed first.
- Play CDN : Use the Play CDN to try Tailwind right in the browser without any build step. The Play CDN is designed for development purposes only, and is not the best choice for production.
Tailwind css is installed using Framework Guides =>Next.js
1.For installation,we first need to install nodejs from Node.js (nodejs.org).Installation is easy just click Next and finish the set up.
For installation, reference was Install Tailwind CSS with Next.js – Tailwind CSS .Tail wind was installed using Next.js framework.While installing,it will be prompted if we need TailWind css / with the project.If we type yes,then all dependency will be installed automatically → tailwind.config.js and postcss.config.js.
Next steps are to be performed in Visual Studio. Install the extension Tailwind css Intellisense so that it will be easy in development.
2. In visual studio,open new terminal,
run “npx create-next-app@latest project” .
This will install tailwind project in “project” folder.Select the dependencies and proceed.In this installation,only Tailwind css is opted. All dependency will be installed automatically → tailwind.config.js and postcss.config.js
3. In terminal,run the command “cd project”
4. Then run the development server using “ npm run dev”
5.Open the link provided.Page is rendered from app/page.js .It will be mentioned in the URL.Continue creating the html page by editing page.js
Common elements like header footer which can be reused can be created a components and can be imported in the page.
First import the component devloped under component folder in header.js and footer.js and header/footer may be used in pages by just using <Header></Header> and <Footer></Footer>
import Header from ‘../component/header’
import Footer from ‘../component/footer’
Make sure pages used in the development must be included in content section in tailwind.config.js (For example add ‘./component/*.{js,ts,jsx,tsx,mdx}’ t include header and footer
Another way to use Tailwind is to develop html page using tailwind utility classes and generate an output css and include the static css in the html.Steps are mentioned below
1.In Visual Studio, Create new folder ‘html’ in the tutorial folder and an html file index.html in it.
2. Add the following code ‘./html/*.{html,js,ts,jsx,tsx,mdx}’ in the tailwind.config.js so that html/js/ts/jsx/tsx/mdx files in html folder can use tailwind css .If not added,tailwind css cant be used in the new folder.By default some folder can use tailwind css ,folder names are updated in tailwind.config.js in the content section
/** @type {import(‘tailwindcss’).Config} */
module.exports = {
content: [
‘./src/pages/**/*.{js,ts,jsx,tsx,mdx}’,
‘./src/components/**/*.{js,ts,jsx,tsx,mdx}’,
‘./src/app/**/*.{html,js,ts,jsx,tsx,mdx}’,
‘./html/*.{html,js,ts,jsx,tsx,mdx}’
],
theme: {
extend: {
backgroundImage: {
‘gradient-radial’: ‘radial-gradient(var(–tw-gradient-stops))’,
‘gradient-conic’:
‘conic-gradient(from 180deg at 50% 50%, var(–tw-gradient-stops))’,
},
},
},
plugins: [],
}
3. By default,globals.css includes all tailwind directives.If not please add the following code in globals.css
@tailwind base;
@tailwind components;
@tailwind utilities;
We can convert gloabls.css to static css file so that we can use it in our html
To create a static css file,run the command
npx tailwindcss -i ./src/app/globals.css -o ./html/style.css –watch .
This will create/update style.css in html folder with styles we used in index.html.
In order to avoid entering command each time we change html/css,add the command in script section of package.json(optional)
{
“name”: “tutorial”,
“version”: “0.1.0”,
“private”: true,
“scripts”: {
“dev”: “next dev”,
“build”: “next build”,
“start”: “next start”,
“lint”: “next lint”,
“cssUpdate”:”tailwindcss -i ./src/app/globals.css -o ./html/style.css –watch”
},
“dependencies”: {
“autoprefixer”: “10.4.14”,
“next”: “13.4.7”,
“postcss”: “8.4.24”,
“react”: “18.2.0”,
“react-dom”: “18.2.0”,
“tailwindcss”: “3.3.2”
}
}
New script with name csUpdate is added “cssUpdate”:”tailwindcss -i ./src/app/globals.css -o ./html/style.css –watch”.
New css file style.css will be created which include all utility classes used in the development.This style.css can be included in html file.
Now run
npm run cssUpdate
npm run dev
Each time when we add utility class to html and save the file ,style.css will be updated and page can be viewed using live server
Lottie in Tailwind
Steps to include lottie animation in tailwind
1.Install lottie dependency in the project folder by opening project folder in visual studio,Then open new terminal,run
npm run dev
npm install lottie-web
Add following code in page.js(page where lottie is included and in the top)
import lottie from ‘lottie-web’;
And then include lottie player and script in the code.
<script src=”https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js”></script>
<lottie-player
src=”https://assets5.lottiefiles.com/packages/lf20_hISLmVmo2x.json”
background=”transparent”
speed=”1″
loop=””
autoplay>
</lottie-player>