Tailwind CSS

Installation

during setup and installation, if you encounter package.json missing error, use npm init to create the missing file

Install Tailwind CSS

npm init -y
npm i tailwindcss

(1.b) Set up Tailwind CSS as a PostCSS Plugin

use separate files for imports and actual CSS styling

npm install tailwindcss@latest postcss@latest autoprefixer@latest npm install postcss-import

/* components.css */
@import "./components/buttons.css";
@import "./components/card.css";

/* components/buttons.css */
.btn {
  @apply px-4 py-2 rounded font-semibold bg-gray-200 text-black;
}

@tailwind base;
@import "./custom-base-styles.css";

@tailwind components;
@import "./custom-components.css";

@tailwind utilities;
@import "./custom-utilities.css";

Add Tailwind CSS as a plugin (if not using a framework):

// postcss.config.js
module.exports = {
  plugins: [
    require('postcss-import'),
    require('tailwindcss'),
    require('autoprefixer'),
  ]
}

Or Add Tailwind into Your Framework Instead:

// app.js
import "tailwindcss/tailwind.css"

Add the following lines to your CSS file to inject Tailwind's provided CSS:

// PostCSS Preprocessor version
@import "tailwindcss/base";
@import "./custom-base-styles.css";

@import "tailwindcss/components";
@import "./custom-components.css";

@import "tailwindcss/utilities";
@import "./custom-utilities.css";

// Simple version
/* ./your-css-folder/styles.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

https://tailwindcss.com/docs/installation https://tailwindcss.com/docs/using-with-preprocessors#using-post-css-as-your-preprocessor

vonnenaut/tailwindcss.md

Tailwind CSS

Installation