Tailwind-Css

Tailwind CSS is a highly customizable, low-level utility-first CSS framework that provides a set of pre-designed utility classes to help developers quickly build and style their websites. It allows developers to create responsive designs and complex layouts without having to write custom CSS, as the framework provides a wide range of utility classes for common styles such as spacing, typography, colors, and more.

Tailwind CSS also offers a flexible and intuitive way to customize styles using configuration files or by extending the default utility classes with new ones. This makes it easy for developers to create consistent and visually appealing designs while maintaining a lean and efficient codebase.

Tailwind CSS is aptly called a utility-first framework because it takes a unique approach to styling web elements.

Utility-First Approach:

Instead of providing pre-designed components and styles (like traditional frameworks), Tailwind CSS focuses on providing a comprehensive set of utility classes.

These utility classes represent individual CSS properties (such as padding, margin, font size, color, etc.). Developers can style elements directly in their HTML by adding these utility classes. For example, the class text-center will center-align text within its parent element.

How It Works:

With Tailwind, you build custom designs by applying pre-existing classes directly in your HTML. For instance, you can use classes like p-6 (padding), bg-white (background color), and rounded-xl (border radius) to style a card component.

This approach allows you to implement completely custom designs without writing a single line of custom CSS.

Benefits of Utility-First:

Efficiency: You aren’t wasting energy inventing custom class names. No more struggling to find abstract names for simple styles.

Flexibility: Easily test out new styles and change layouts by combining utility classes. Maintainability: Although it might look unusual at first, managing utility classes becomes straightforward with practice.

Component Extraction: To avoid repetition, you can extract components and reuse them across your project.

Tailwind CSS works by scanning all of your 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.

In summary, Tailwind CSS prioritizes how elements should be displayed rather than focusing on their functionality. It’s a powerful tool for creating custom designs efficiently! 🎨✨

cient and modular. Here are some key points about Tailwind CSS:

Key Features

Utility-First Approach:

Tailwind CSS provides low-level utility classes that can be combined to create complex designs directly in your HTML. This approach allows for highly customizable and reusable styles.

Responsive Design:

Tailwind includes responsive design utilities out of the box. You can easily apply different styles based on screen sizes using responsive prefixes like sm:, md:, lg:, and xl:.

Customization:

Tailwind is highly customizable. You can modify the default configuration or extend it by creating a tailwind.config.js file to fit your project's design needs. This includes customizing colors, spacing, fonts, and more.

Built-In Themes:

The framework comes with a default theme, but you can extend or replace it with your own custom theme settings.

Variants:

Tailwind supports various state variants like hover, focus, active, and more. This allows you to style elements based on their state easily.

Utility Plugins:

Tailwind has a rich ecosystem of plugins that add additional utilities or components, such as typography, forms, and aspect ratio.

Performance:

Tailwind generates a large CSS file during development, but you can use tools like PurgeCSS to remove unused styles in production, significantly reducing the file size.

Steps

Visit the site https://tailwindcss.com/
Installation:

using CLI

Install Tailwind CSS

Install tailwindcss via npm, and create your tailwind.config.js file.
```
npm install -D tailwindcss OR  npm install  tailwindcss --save-dev
npx tailwindcss init
```
Note: npx tailwindcss init --full creates the config file with full styles while npx tailwindcss init will create the cutom config file.

Configure your template paths

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: [],
}

`/** @type {import('tailwindcss').Config} */`
This line is a JSDoc type annotation that helps with TypeScript and some IDEs (like VSCode) to provide autocompletion and type checking for the Tailwind CSS configuration. It ensures that the module.exports object conforms to the expected structure of a Tailwind CSS configuration.

The content key specifies the paths to all of your template files. Tailwind CSS uses this information to purge unused styles in production by scanning the specified files for class names.

./src/**/*.{html,js}": This is a glob pattern that tells Tailwind to look for files with .html and .js extensions within the src directory and its subdirectories.
The **/* part of the pattern means "all files recursively.

The theme key is used to customize the default theme provided by Tailwind CSS. Inside theme, you can define custom values for various design tokens such as colors, spacing, typography, and more.

extend: {}: This key allows you to extend the default theme without completely overriding it. By adding custom values here, you can enhance the default configuration.

For example, to add custom colors, you might modify the extend object like this:

theme: {
  extend: {
    colors: {
      customBlue: '#1E40AF',
      customRed: '#DC2626',
    },
  },
},

The plugins key is an array where you can include Tailwind CSS plugins. Plugins can add additional utilities, components, or modify the behavior of the framework.

To add a plugin, you would include it in this array. For example, to add the @tailwindcss/typography plugin, you would first install it via npm:

npm install @tailwindcss/typography

Then, you add it to the plugins array:

  plugins: [
    require('@tailwindcss/typography'),
  ],

Full Example with Customizations and Plugins Here's a more complete example of a tailwind.config.js file with custom theme extensions and a plugin:

module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {
      colors: {
        customBlue: '#1E40AF',
        customRed: '#DC2626',
      },
      spacing: {
        '72': '18rem',
        '84': '21rem',
        '96': '24rem',
      },
      fontFamily: {
        sans: ['Inter', 'sans-serif'],
      },
    },
  },
  plugins: [
    require('@tailwindcss/typography'),
  ],
}

<div class="prose">
  <h1>Heading</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla consequat felis sed ligula accumsan, sit amet volutpat ante pharetra.</p>
  <ul>
    <li>List item 1</li>
    <li>List item 2</li>
  </ul>
  <blockquote>
    This is a blockquote.
  </blockquote>
</div>

darkMode: 'media', // or 'class'

This setting determines how Tailwind CSS handles dark mode. Tailwind CSS supports two strategies for dark mode:

"media": This strategy uses the user's system preference for dark mode. It applies dark mode styles when the user's operating system is set to dark mode.

darkMode: "media", // Uses system preference for dark mode

"class": This strategy relies on a CSS class to enable dark mode. By toggling the dark class on an element (typically the or ), you can switch between light and dark modes manually, often using JavaScript.

darkMode: "class", // Uses the 'dark' class to enable dark mode

Theme

The theme section allows you to customize the default design system provided by Tailwind CSS. slate: { 100, 800 }: This extends Tailwind's color palette with two custom slate colors: slate-100 is a light color (#F0F4F8). slate-800 is a dark color (#2D3748).

Variants

The variants section specifies which variants should be generated for various utilities. By default, Tailwind generates several variants like hover, focus, etc. You can extend this list to include additional variants.

backgroundColor: ["dark"]: This extends the backgroundColor utility to include a dark variant. It means that you can apply background colors conditionally based on whether the dark class is present.

variants: {
  extend: {
    backgroundColor: ["dark"], // Enable dark mode variant for background colors
  },
},

Add the Tailwind directives to your CSS

Add the @tailwind directives for each of Tailwind’s layers to your main CSS file. e.g src/input.css to get the output in for instance public/output.css. The output name is flexible.
```
@tailwind components;
@tailwind utilities;
```

These are Tailwind CSS directives used in your CSS file to inject Tailwind’s styles into your stylesheet:

@tailwind base;: This directive injects Tailwind’s base styles, which are a set of pre-defined styles that reset and normalize browser defaults.

@tailwind components;: This injects any custom component classes that you define within your Tailwind configuration file, allowing you to use them throughout your project.

@tailwind utilities;: This directive injects Tailwind’s utility classes, which are a large set of CSS classes that serve specific design purposes, like setting margins, changing text colors, applying flexbox layouts, and more.

These directives tell Tailwind where to include the respective styles in your final CSS when it’s processed.

Start the Tailwind CLI build process in your CLI Run the CLI tool to scan your template files for classes and build your CSS.

npx tailwindcss -i ./src/input.css -o ./public/output.css --watch

NOTE: I - INPUT, O - OUTPUT

Start using Tailwind in your HTML Add your compiled CSS file to the and start using Tailwind’s utility classes to style your content.

Note: Install PostCSS CLI and Autoprefixer:

npm install -D postcss-cli autoprefixer

Script 1: Using PostCSS

"build:css": "postcss src/input.css -o public/styles.css"

Tool Used: postcss

Command Explanation:

postcss src/input.css: This tells PostCSS to process the src/input.css file.

-o public/styles.css: This specifies the output file, which will be public/styles.css.

Usage: This script processes your CSS using PostCSS and any plugins defined in your postcss.config.js file. In this case, Tailwind CSS would be one of those plugins.

Scenario: Use this when you want to leverage the full power of PostCSS and its plugin ecosystem, including Tailwind CSS.

Script 2: Using Tailwind CLI Directly

"build:tailwindcss": "npx tailwindcss -i ./src/input.css -o ./public/style.css --watch"

Tool Used: tailwindcss CLI

Command Explanation:

npx tailwindcss: This runs the Tailwind CSS CLI tool.

-i ./src/input.css: This specifies the input file, src/input.css.

-o ./public/style.css: This specifies the output file, public/style.css.

--watch: This makes the CLI watch for changes in your CSS files and rebuild automatically when changes are detected.

Usage: This script uses the Tailwind CSS CLI directly to build your CSS, without involving PostCSS explicitly.

Scenario: Use this for a simpler setup when you primarily need to build and watch Tailwind CSS files. It's straightforward and quick to set up.

Key Differences

Tools and Plugins:

The first script (build:css) uses PostCSS, which allows you to use multiple PostCSS plugins along with Tailwind CSS. This is useful if you need additional PostCSS transformations (like autoprefixer, CSSNano for minification, etc.). The second script (build:tailwindcss) uses the Tailwind CLI directly, which is simpler but doesn't involve other PostCSS plugins unless you configure them separately.

Complexity and Flexibility:

Using PostCSS (build:css) is more flexible and powerful because it integrates with the broader PostCSS ecosystem. Using the Tailwind CLI (build:tailwindcss) is simpler and more focused on Tailwind CSS, making it easier to set up for projects that only require Tailwind CSS features.

Watch Mode:

The build:tailwindcss script includes a --watch flag to automatically rebuild the CSS when source files change, which is useful during development. The build:css script does not include a watch mode by default, although you could add one using tools like nodemon or a custom watcher script.

npm install -D tailwindcss autoprefixer cssnano postcss postcss-cli

The build:css script is for development.
The build:css:prod script is for production, where cssnano will minify the CSS.

autoprefixer:

Purpose:

autoprefixer is a PostCSS plugin that adds vendor prefixes to your CSS rules using data from Can I Use. This ensures that your CSS works across different browsers that may require specific prefixes for certain CSS properties.

How it Works:

When you write standard CSS, autoprefixer will automatically add the necessary prefixes. For example, it converts:

.example {
display: flex;
}

into:

.example {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}

This makes sure your styles are compatible with older versions of browsers that need these prefixes.

cssnano:

Purpose:

cssnano is a PostCSS plugin that optimizes and minifies your CSS for production. It reduces the file size of your CSS by removing unnecessary whitespace, comments, and other redundant data without affecting the functionality.

Preset 'default':

The preset: 'default' option configures cssnano to use its default set of optimizations, which includes minification, removing duplicate rules, reducing color values, and more. How it Works: During the build process, cssnano will process your CSS and apply various optimizations to reduce its size. For example:

.example {
color: #ffffff;
margin: 0px 10px 0px 10px;
}

might be minified to:

.example{color:#fff;margin:0 10px}

The difference between the two scripts in package.json is how they handle the environment setting, which influences how cssnano processes your CSS. Here's a detailed explanation:

Development Build Script

"build:css": "postcss src/input.css -o public/styles.css"

Command: postcss src/input.css -o public/styles.css

Environment: This script runs without explicitly setting the NODE_ENV environment variable, which means it will use the default environment (usually development).

Behavior: In development mode, cssnano is not triggered or might run with minimal optimizations, ensuring the output is easier to read and debug. This script processes your CSS with Tailwind CSS and Autoprefixer but typically avoids heavy minification to keep the output more human-readable.

Production Build Script

"build:css:prod": "NODE_ENV=production postcss src/input.css -o public/styles.css"

Command: NODE_ENV=production postcss src/input.css -o public/styles.css

Environment: This script sets the NODE_ENV environment variable to production before running the PostCSS command.

Behavior: When NODE_ENV is set to production, cssnano applies its full suite of optimizations and minification strategies. This results in a smaller CSS file that is optimized for performance, ideal for deployment in a production environment.

Liver Server

npm install live-server --save-dev then use npm start

UTILITY CLASSES

Container

Sets a fixed width at each responsive breakpoint. Centers the content within the container when combined with mx-auto.

<div class="container mx-auto">
  <!-- Content here -->
</div>

Layout

block: Displays an element as a block (takes up full width available). inline-block: Displays an element as an inline block (respects width/height but flows with text). inline: Displays an element as inline (flows with text, no width/height). flex: Enables flexbox layout on an element. inline-flex: Enables flexbox layout but keeps the element inline. grid: Enables grid layout on an element. inline-grid: Enables grid layout but keeps the element inline.

<div class="flex">
  <!-- Flex items here -->
</div>

Position

static: Default positioning (normal flow of the document). relative: Positioned relative to its normal position. absolute: Positioned relative to the nearest positioned ancestor. fixed: Positioned relative to the viewport. sticky: Positioned based on the user's scroll position.

<div class="relative">
  <div class="absolute top-0 left-0">
    <!-- Positioned content here -->
  </div>
</div>

Display

block: Displays an element as a block. inline-block: Displays an element as an inline block. inline: Displays an element as inline. flex: Displays an element as a flex container. inline-flex: Displays an element as an inline flex container. grid: Displays an element as a grid container. inline-grid: Displays an element as an inline grid container. hidden: Hides an element.

<div class="flex">
  <div class="hidden lg:block">
    <!-- This content is hidden on small screens, visible on large screens -->
  </div>
</div>

Margin

m-{size}: Applies margin on all sides. mt-{size}: Applies margin-top. mr-{size}: Applies margin-right. mb-{size}: Applies margin-bottom. ml-{size}: Applies margin-left. mx-{size}: Applies margin-left and margin-right. my-{size}: Applies margin-top and margin-bottom. Sizes can be values like 0, 1, 2, 4, 8, etc., corresponding to a spacing scale (e.g., 1 equals 0.25rem).

<div class="mt-4 mb-8 mx-auto">
  <!-- Margins applied here -->
</div>

Padding

p-{size}: Applies padding on all sides. pt-{size}: Applies padding-top. pr-{size}: Applies padding-right. pb-{size}: Applies padding-bottom. pl-{size}: Applies padding-left. px-{size}: Applies padding-left and padding-right. py-{size}: Applies padding-top and padding-bottom.

<div class="p-4">
  <!-- Padding applied here -->
</div>

Breakpoints

Breakpoints and Corresponding Classes

Small Screens (sm:):
Applies styles on screens wider than 640px.

Medium Screens (md:):
Applies styles on screens wider than 768px.

Large Screens (lg:):
Applies styles on screens wider than 1024px.

Extra Large Screens (xl:):
Applies styles on screens wider than 1280px.

<div class="text-center sm:text-left md:text-center lg:text-right xl:text-center">
  <!-- Content here -->
</div>


text-center: Applies text alignment to center by default.
sm:text-left: On small screens and larger (>640px), text alignment is left.
md:text-center: On medium screens and larger (>768px), text alignment is center.
lg:text-right: On large screens and larger (>1024px), text alignment is right.
xl:text-center: On extra large screens and larger (>1280px), text alignment is center.

Using Individual Corner Classes

Rounded Corners with Specific Sizes:

Tailwind CSS provides classes for specific corners (rounded-{side}-{size}), where {side} can be t (top), r (right), b (bottom), or l (left), and {size} can be none, sm, md, lg, xl, or full.

rounded-t-sm: Small rounded corners on the top side. rounded-b-md: Medium rounded corners on the bottom side. rounded-tr-lg: Large rounded corners on the top-right side. rounded-bl-full: Fully rounded corners on the bottom-left side.

<div class="rounded-t-sm rounded-b-md rounded-tr-lg rounded-bl-full bg-gray-200 p-4">
  <!-- Content here -->
</div>


In Tailwind CSS, the default values for borderRadius are as follows:


borderRadius: {
  'none': '0',
  'sm': '0.125rem',   // 2px
  'DEFAULT': '0.25rem',  // 4px
  'md': '0.375rem',   // 6px
  'lg': '0.5rem',     // 8px
  'xl': '0.75rem',    // 12px
  '2xl': '1rem',      // 16px
  '3xl': '1.5rem',    // 24px
  'full': '9999px',   // Full rounded
},

In Tailwind CSS, the classes rounded and borderRadius serve different purposes:

rounded:

Purpose: This class is used to apply predefined levels of border radius to an element.
Usage: It allows you to quickly apply rounded corners without needing to specify exact pixel values.
Examples: rounded-sm, rounded-md, rounded-lg, rounded-xl, etc.
Default Values: Tailwind CSS provides default values for these classes (sm, md, lg, xl, etc.), which correspond to specific pixel sizes for rounded corners.
Example:

<div class="rounded-lg bg-gray-200 p-4">
  <!-- Content here -->
</div>

borderRadius:

Purpose: This is a configuration option in tailwind.config.js that allows you to customize or extend the set of border radius values available in your project.
Usage: It's typically used when you need to define new sizes or override default sizes for rounded corners.
Examples: Customizing sizes like sm, md, lg, xl, and adding new sizes such as 2xl, 3xl, or specific pixel values.
Configuration: Defined in the theme section of tailwind.config.js.

// tailwind.config.js

module.exports = {
theme: {
borderRadius: {
'sm': '0.125rem', // 2px
'DEFAULT': '0.25rem', // 4px
'md': '0.375rem', // 6px
'lg': '0.5rem', // 8px
'xl': '0.75rem', // 12px
'2xl': '1rem', // 16px
'3xl': '1.5rem', // 24px
'full': '9999px', // Full rounded
},
},
};

The setting environment variables like NODE_ENV=production in the command line is not natively supported on Windows. This syntax works on Unix-based systems (Linux and macOS) but not on Windows.

To make this work cross-platform, you can use a package called cross-env. This package allows you to set environment variables across platforms. npm install --save-dev cross-env so use "build:css:prod": "cross-env NODE_ENV=production postcss src/input.css -o public/styles.css"

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
    ...(process.env.NODE_ENV === "production" ? { cssnano: { preset: "default" } } : {}),
  },
};

Breakdown of the Code

Spread Operator (...):

The spread operator ... is used here to conditionally include the cssnano plugin in the plugins object.

If process.env.NODE_ENV is set to "production", the expression { cssnano: { preset: "default" } } will be expanded into the plugins object. If the condition is not met, the expression will expand to an empty object {}, effectively adding nothing to the plugins object. Conditional Object Inclusion:

process.env.NODE_ENV === "production": This checks if the NODE_ENV environment variable is set to "production". ? { cssnano: { preset: "default" } }: If the condition is true (i.e., the code is running in a production environment), it returns the object { cssnano: { preset: "default" } }. : {}: If the condition is false (i.e., the code is not running in a production environment), it returns an empty object {}.

VARIOUS BUILD SCRIPTS

    "build:css": "postcss src/input.css -o public/styles.css",
    "build:tailwindcss": "npx tailwindcss -i ./src/input.css -o ./public/style.css --watch",
    "build:css:prod": "cross-env NODE_ENV=production postcss src/input.css -o public/styles.css",
    "build:css:prod:env": "dotenv -e .env postcss src/input.css -o public/styles.css --verbose
```

1 -- USES POSTCSS
2 -- USES TAILWIND DIRECTLY
3 -- USES cross-env package and state the NODE_ENV TO PRODUCTION
4 -- USES THE .env file where  NODE_ENV was set TO PRODUCTION also

Form.html

min-h-screen: This ensures that the <body> element has a minimum height equal to the height of the screen (100vh). This is useful for ensuring that your content covers the entire viewport height, especially when using flexbox (flex).

max-w-md: This sets the maximum width of the <div> to md (medium) size as per Tailwind's predefined width scale. The exact width will depend on your Tailwind configuration, but typically it's around 28rem or 448px. This class ensures that the <div> does not exceed this width, making it responsive and suitable for various screen sizes.

w-full: This sets the width of the <div> to 100%, ensuring it spans the full width of its container. Combined with max-w-md, this ensures that the <div> is responsive and takes up the full width on smaller screens where max-w-md is not reached.


Example Utility Classes:
.input: Applies styles for text inputs.
.select: Styles for select dropdowns.
.textarea: Styles for textareas.
.checkbox: Styles for checkboxes.
.radio: Styles for radio buttons.

Plugins

npm install @tailwindcss/forms

Name		Name	Last commit message	Last commit date
Latest commit History 2 Commits
node_modules		node_modules
public		public
src		src
.env		.env
README.md		README.md
package-lock.json		package-lock.json
package.json		package.json
personal.md		personal.md
postcss.config.js		postcss.config.js
tailwind-default.config.js		tailwind-default.config.js
tailwind.config.js		tailwind.config.js
tailwind.config2.js		tailwind.config2.js

Jedidiah-Solomon/Tailwind-Css

Folders and files

Latest commit

History

Repository files navigation

Tailwind-Css

Utility-First Approach:

How It Works:

Benefits of Utility-First:

Key Features

Steps

using CLI

Install Tailwind CSS

Configure your template paths

darkMode: 'media', // or 'class'

Theme

Variants

Add the Tailwind directives to your CSS

Script 1: Using PostCSS

Tool Used: postcss

Command Explanation:

Script 2: Using Tailwind CLI Directly

Tool Used: tailwindcss CLI

Command Explanation:

Key Differences

Tools and Plugins:

Complexity and Flexibility:

Watch Mode:

autoprefixer:

Purpose:

How it Works:

cssnano:

Purpose:

Preset 'default':

Development Build Script

Production Build Script

Liver Server

UTILITY CLASSES

Container

Layout

Position

Display

Margin

Padding

Breakpoints

Using Individual Corner Classes

Breakdown of the Code

VARIOUS BUILD SCRIPTS

Form.html

Plugins

About

Resources

Stars

Watchers

Forks

Releases

Packages 0

Languages

Packages