Tailwindcss install Step by Step by postCSS

install process

⚠️ Warning

initialize npm empty file

npm init -y

install tailwindcss by postcss with auto prefixed

⚠️ if you are using any module bundler then you can remove this cssnano cssnano-preset-advanced

npm install -D tailwindcss postcss postcss-cli autoprefixer cssnano cssnano-preset-advanced

create Tailwindcss config file

npx tailwindcss init

create postcss config file

npx tailwindcss init -p

###After creating postcss.config.js file add {$this} code in there

⚠️ if you are using any module bundler then you can remove this cssnano: { preset: "advanced", },

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
    cssnano: {
      preset: "advanced",
    },
  },
};

use this code in package.json file for build

create a public folder and create index.html file and a style.css file

then create a src folder and on there create a tailwind.css file

add this in your tailwind.css file

_(note: you can name it whatever you want and create or create all file where you want) _

@tailwind base;
@tailwind components;
@tailwind utilities;

use this code on your scripts tag on your package.json file ( on scripts tag)

⚠️ If You Are using Vite/ Webpack/ RollUp or any kind of Module Bundler then you do not need to use this code

    "dev": " npx tailwindcss -i ./src/tailwind.css  -o ./public/style.css -w",
    "build": "postcss ./src/tailwind.css  -o ./public/style.css -w"

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}"],
  // no need this from here this are for example  , just need to add this path
  theme: {
    extend: {},
  },
  plugins: [],
};

create .vscode folder and in there create settings.json file , add this in that file

this for tailwindCSS auto-complete and it's not going to show error

{
  "css.validate": false,
  "tailwindCSS.emmetCompletions": true
}

Run Tailwind CSS by post CSS

npm run build-p

Automatic Class Sorting with Prettier

install prettier Extension from VS Code Marketplace and install on your project using CLI command

npm install --save-dev prettier-plugin-tailwind-css

yarn add -D prettier-plugin-tailwind-css

Using prettier with tailwind in your workspace

Create a file in this name

.prettierrc.json

use this command to run pretteir in your project (for all file use a dot. or use your file name)

npx prettier --write .

Add "removeDuplicatesClasses" in Json file to remove duplicate class

{ "removeDuplicatesClasses": true }

More:

Learning recources

Official Doc - Learn With Sumit (Bangla)

Tailwind CSS Bangla Tutorial Series Tailwind Lab - Official Tailwindcss You Tube Channel

💙 Official resource

💙 Website - Official Tailwind CSS website.
💙 Repository - Official Tailwind CSS repository.
💙 Discussions - Official place to connect with other community members about Tailwind.
💙 Tailwind UI - Component library made with Tailwind CSS.
💙 Headless UI - Completely unstyled, fully accessible UI components.
💙 Heroicons - Beautiful, hand-crafted SVG icons.
💙 Play - Advanced online playground for Tailwind CSS.
💙 Just-in-time - Just-in-time compiler for Tailwind CSS.
Tailwind Weekly - Weekly newsletter about all things Tailwind CSS.
Built With Tailwind - Community-driven collection of awesome websites built with Tailwind CSS.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Repository files navigation

Tailwindcss install Step by Step by postCSS

install process

⚠️ Warning

initialize npm empty file

install tailwindcss by postcss with auto prefixed

create Tailwindcss config file

create postcss config file

use this code in package.json file for build

create a public folder and create index.html file and a style.css file

then create a src folder and on there create a tailwind.css file

add this in your tailwind.css file

_(note: you can name it whatever you want and create or create all file where you want) _

use this code on your scripts tag on your package.json file ( on scripts tag)

Add the paths to all of your template files in your tailwind.config.js file.

create .vscode folder and in there create settings.json file , add this in that file

this for tailwindCSS auto-complete and it's not going to show error

Run Tailwind CSS by post CSS

Automatic Class Sorting with Prettier

install prettier Extension from VS Code Marketplace and install on your project using CLI command

Using prettier with tailwind in your workspace

Create a file in this name

use this command to run pretteir in your project (for all file use a dot. or use your file name)

Add "removeDuplicatesClasses" in Json file to remove duplicate class

More:

Learning recources

💙 Official resource

About

Uh oh!

Uh oh!

Name		Name	Last commit message	Last commit date
Latest commit History 27 Commits
.vscode		.vscode
public		public
src		src
.gitignore		.gitignore
README.md		README.md
package-lock.json		package-lock.json
package.json		package.json
postcss.config.js		postcss.config.js
tailwind.config.js		tailwind.config.js

yeasin2002/Programming-Resources-And-Notes

Folders and files

Latest commit

History

Repository files navigation

Tailwindcss install Step by Step by postCSS

install process

⚠️ Warning

initialize npm empty file

install tailwindcss by postcss with auto prefixed

create Tailwindcss config file

create postcss config file

use this code in package.json file for build

create a public folder and create index.html file and a style.css file

then create a src folder and on there create a tailwind.css file

add this in your tailwind.css file

_(note: you can name it whatever you want and create or create all file where you want) _

use this code on your scripts tag on your package.json file ( on scripts tag)

Add the paths to all of your template files in your tailwind.config.js file.

create .vscode folder and in there create settings.json file , add this in that file

this for tailwindCSS auto-complete and it's not going to show error

Run Tailwind CSS by post CSS

Automatic Class Sorting with Prettier

install prettier Extension from VS Code Marketplace and install on your project using CLI command

Using prettier with tailwind in your workspace

Create a file in this name

use this command to run pretteir in your project (for all file use a dot. or use your file name)

Add "removeDuplicatesClasses" in Json file to remove duplicate class

More:

Learning recources

💙 Official resource

About

Topics

Resources

Uh oh!

Stars

Watchers

Forks

Uh oh!