Tailwindcss

Tailwind CSS can be used to style websites in the fastest and easiest way.Tailwind CSS is basically a utility-first CSS framework for rapidly building custom user interfaces. It is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override

Tailwindcss

Why Tailwind CSS?

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.


Advantages of Tailwind CSS:

No more silly names for CSS classes and Id’s.
Minimum lines of Code in CSS file.
We can customize the designs to make the components.
Makes the website responsive.
Makes the changes in the desired manner.
CSS is global in nature and if make changes in the file the property is changed in all the HTML files linked to it. But with the help of Tailwind CSS we can use utility classes and make local changes.

  1. Install Tailwind via npm 
                    
                    npm install -D tailwindcss
                
            
                    
                    npx tailwindcss init
    Add the paths to all of your template files(tailwind.config.js) 
                    
                    module.exports = {
                      content: ["./src/**/*.{html,js}"],
                      theme: {
                        extend: {},
                      },
                      plugins: [],
                    }
    Add the Tailwind directives to your CSS(src/input.css ) 
    
        @tailwind base;
        @tailwind components;
        @tailwind utilities;
    Start the Tailwind CLI build process 
        
        npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch
    Start using Tailwind in your HTML (src/index.html) 
        
        <!doctype html>
        <html>
        <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <link href="/dist/output.css" rel="stylesheet">
        </head>
        <body>
          <h1 class="text-3xl font-bold underline">
            Hello world!
          </h1>
        </body>
        </html>
  2. Installing Tailwind CSS as a PostCSS plugin 
        
        npm install -D tailwindcss postcss autoprefixer
    

        
        npx tailwindcss init
    Add Tailwind to your PostCSS configuration( postcss.config.js) 
        
        module.exports = {
            plugins: {
              tailwindcss: {},
              autoprefixer: {},
            }
          }
    Configure your template paths (tailwind.config.js ) 
        
        module.exports = {
            content: ["./src/**/*.{html,js}"],
            theme: {
              extend: {},
            },
            plugins: [],
          }
    Add the Tailwind directives to your CSS (main.css) 
        
        @tailwind base;
        @tailwind components;
        @tailwind utilities;
    Start your build process 
        
        npm run dev
    Start using Tailwind in your HTML 
        
        <!doctype html>
        <html>
        <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <link href="/dist/main.css" rel="stylesheet">
        </head>
        <body>
          <h1 class="text-3xl font-bold underline">
            Hello world!
          </h1>
        </body>
        </html>
  3. Install Tailwind CSS with Next.js 
    
    npx create-next-app@latest my-project --typescript --eslint
    


        
        cd my-project
    Install Tailwind CSS 
            
            npm install -D tailwindcss postcss autoprefixer
        
        
                
                npx tailwindcss init -p
    Configure your template paths (tailwind.config.js) 
                    
                 
                    module.exports = {
                      content: [
                        "./app/**/*.{js,ts,jsx,tsx}",
                        "./pages/**/*.{js,ts,jsx,tsx}",
                        "./components/**/*.{js,ts,jsx,tsx}",
                     
                        // Or if using `src` directory:
                        "./src/**/*.{js,ts,jsx,tsx}",
                      ],
                      theme: {
                        extend: {},
                      },
                      plugins: [],
                    }
    Add the Tailwind directives to your CSS (globals.css) 
                        
                        @tailwind base;
                        @tailwind components;
                        @tailwind utilities;
    Start your build process 
                            
                            npm run dev
    Start using Tailwind in your project (index.tsx ) 
                                
                                export default function Home() {
                                    return (
                                      <h1 className="text-3xl font-bold underline">
                                        Hello world!
                                      </h1>
                                    )
                                  }
  4. Add the Play CDN script to your HTML 
                                    
 <script src="https://cdn.tailwindcss.com"></script>
  5. Tailwind CSS Container

    To center the container 
                                        
                                        mx-auto
    To add padding the container 
                                                            
                                                            px-{size}
  6. To add padding the container
    Breakpoint min-width
    sm 640px
    md 768px
    lg 1024px
    xl 1280px
    2xl 1536px
  7. Tailwind CSS Box Sizing

    In this mode, the width and height properties include content, padding, and borders 
                                                
                                                box-border
    In this mode, the width and height class include only the content. 
                                                    
                                                    box-content
  8. Tailwind CSS Display 
                                                        
                                                        <blockquote>   </blockquote>
  9. <q> tag: “used to insert a short quote or to add a double quote on an HTML page” 
                                                            
                                                            <q>    </q>
  10. <cite> tag: “used to provide a reference or defines the title of a creative work on an HTML page” 
                                                            
                                                            <cite>       </cite>
  11. <bdo> tag: “used to override the current direction of text on an HTML page” 
                                                            
                                                            <bdo>        </bdo>
  12. <address> tag: “used to show contact information on an HTML page” 
                                                            
                                      
<address>             </address>
  13. <code> tag: “used to show programming code on an HTML page” 
                                                            
                                                            <code>           </code>
  14. HTML Attributes
    HTML Attributes

    It is used to define the characteristics of an HTML element.
    It is placed in the opening tag of the HTML element.
    All attributes are made up of two parts: Name and Value.

    Name: It is used to set the property for that element.

    Value: It is used to set the value of that property for that element.

    There are three types of HTML attributes:
    1) Core Attributes
    2) Internationalization Attributes
    3) Generic Attributes
  15. HTML Core Attributes
    HTML Core Attributes

    The most widely used attribute is core attributes. There are 4 types of core attributes:

    • Id
    • Class
    • Title
    • Style

    This is the most widely used attribute. The id attribute is used to give a unique id to an HTML element. Each element in HTML with an id attribute has its own unique identity, just as each of us has our own unique identity. Multiple elements can’t share the same id.

    The class attribute is used to specify a class to an HTML element. It is not unique like the id attribute. Multiple elements can share the same class. It is used to associate an element with a stylesheet, JS.

    The id attribute is used to give a title to an HTML element. When the HTML element is loading, a tooltip of the cursor comes and shows the written title.

    The style attribute is used to give styling to an HTML element. It is a property of CSS (Cascading Style Sheet). It is mainly used by the CSS. It is the inline property of an element. In CSS, if we want to style within an HTML element we use the style attribute in inline of an HTML element.
  16. HTML Internationalization Attributes
    HTML Internationalization Attributes

    There are three types of internationalization attributes i.e. dir, lang, xml:lang

    • The dir Attribute
    • The lang Attribute
    • The xml:lang Attribute

    The dir attribute tells the browser in which direction should the text flow. There are two types of dir attributes:
    ltr: Left to right
    rtl: Right to left

    This attribute is replaced by xml:lang attribute. Earlier it was used to indicate the language for the web page.

    Value for the xml:lang should be ISO-639 country code.
  17. HTML Generic Attributes
    HTML Generic Attributes

    Generic attributes include various attributes which are mostly used. Some common generic attributes are:

    • The “align” Attribute
    • The “valign” Attribute
    • The “bgcolor” Attribute
    • The “width” Attribute
    • The “height” Attribute
    • The “src” Attribute
    • The “alt” Attribute

    align attribute uses align name for HTML element and uses left, right, and center values to indicate the text accordingly. It is used for horizontal aligns tags.

    valign attribute uses valign name for HTML element and uses top, middle, and bottom values to indicate the text accordingly. It is used for vertical aligns tags.

    bgcolor attribute uses bgcolor name to HTML element and uses numeric, hexadecimal, RGB code values to change the element's background color accordingly.

    The width attribute uses the width name of the HTML element and uses numeric values to change the element’s width according to the numeric given

    The height attribute uses the height name of the HTML element and uses numeric values to change the element’s height according to the numeric given.

    The src attribute is mostly used by the img element that we’ll be going to discuss later. This src attribute specifies the URL path to that element that is to be displayed. We can choose any of the two paths:
    1. Absolute path: This path contains the path of the external content.
    2. Relative path: This path contains the path of the internal content only. Relative paths are mostly used because content cannot be suddenly removed or changed. These are placed within a separate folder and that path is very well known to us

    The alt attribute is mostly used by the img element. This alt attribute specifies the alternate text to that image that is to be displayed. For some issues, if that image is not visible then alt text helps to tell us about the description of that image.
  18. HTML Links
    HTML Links

    HTML Link uses two attributes

    • href attribute
    • target attribute

    Without this tag, we are unable to go to the next page or the next document. This attribute is compulsorily used by the <a> tag. This attribute contains a URL path.

    The link tag uses another attribute which is the target attribute. By default, if we open any link then the page will be displayed in the current browser window. But if we wish to change these settings then we use the target attribute. It tells us where we want our linked document to be opened.
    This target attribute can use any of the values:
    • _blank: Opens linked document in a new window
    • _top: Opens document in the full body of the window
    • _self: Opens document in the same window
    • _parent: Opens linked document in a parent frame

    To link to a particular section of a webpage:
    • use the name attribute or id attribute
    • use hyperlink with # place where you want to go on a webpage.

    Three types of links are there: active, visited, and unvisited.
    • Active: It is in red with an underline.
    • Visited: It is purple and underlined.
    • Unvisited: It is blue and underlined.
    By CSS we can change the color of the links. 
    
          < href= "Your specified path" >             </a>
  19. HTML Comments
    HTML Comments

    HTML Comments

    • Comments are a piece of code that is ignored by a web browser.
    • Comments help us to understand the code.
    • All programming language has their commenting style.
    • In HTML, we use <!-- content --> tag. Any content placed in these brackets will be treated as a comment.
    • Shortcut Keys are "Ctrl + /" . This will automatically put our selected content as a comment
    • There are two types of comments: Single comments and Multiline comments.


    Single comments 
    
           <!-- Single line Comment -->

    Multi-line comments 
    
        <!--
        This is a multiline comment.
        You can add as many as lines you want.
        -->
  20. HTML Images
    HTML Images

    To represent HTML pages beautifully and to explain content, we use images for that. Our ability to comprehend complex things is aided by visual representations to do that we use images.
    <img> tag uses the height or width attribute to set the height or width of an image. Values for height or width attribute must be in pixel or percentage and value should be placed in double quotes otherwise we can see an error. 

    
          <img src="images/profile_pic" alt="Testing Image" />
  21. HTML Lists
    HTML Lists

    Our day-to-day lives revolve around lists. For example, We purchase items while shopping. A list of all our items is included on the bill we receive from the shopkeeper. Similarly, web developers use lists to display the data.
    HTML lists are used to display the data in an ordered and unordered form. List contains one or more list elements. The HTML list is of three types:

    • An unordered list
    • An ordered list
    • A definition list

    This list will list items using bullets.
    Unordered lists have no sequence.
    They are more like bullet points.
    Setting type attribute: Type attribute used to specify the type of bullet.
    There are three types of bullets:
    • disc
    • square
    • circle

    This list will list items using numbers. We can use different types of numbers like roman numerals etc.
    Ordered lists have a sequence.
    They are a more like numbered list.
    the type attribute is used to specify the type of numbering we want. There are five options:
    1. Uppercase Roman Numerals
    2. Lowercase Roman Numerals
    3. Numerals
    4. Lowercase Letters
    5. Uppercase Letters

    the start attribute is used to specify the starting type of numbering. (start="3")

    This list will arrange list items like a dictionary.
    Definition List is also known as Description List.
    Definition List works the same as a dictionary works.
    Dictionary is used for describing the term similarly in HTML we use a Definition List or Description List to define a term.

    unordered list 
    
          <ul>
          <li>Pen</li>
          </ul>

    ordered list 
    
          <ol>
          <li>Pen</li>
          </ol>

    Definition list 
    
          <dl>
            <dt>//definition term</dt>
            <dd>//describing term</dd>
            </dl>
  22. HTML Tables
    HTML Tables
    • <table> tag is used to define the start of a table.
    • <table> tag also has its corresponding </table> tag.
    • we can arrange our data in rows and columns of a table.
    • <th> tag is used for heading in a table.
    • For rows, <tr> tag is used.
    • For columns, <td> tag is used
    • NOTE: <td> tag also referred to as data cell.

    
          <table>
        <tr>
        <th>Name</th>
        <th>Age</th>
        </tr>
        <tr>
        <td>Harry</td>
        <td>100</td>
        </tr>
        </table>
  23. HTML Block Elements
    HTML Block Elements
    You already know about tags all those tags have some displaying value i.e. Either they are block-level elements or they are Inline elements.
    Now, let's discuss block-level elements.
    Block-level elements are those elements that start in a new line and take the entire width of the screen.
    Block-level Elements:
    • <h1>,<h2>,<h3>,<h4>,<h5>,<h6>
    • <p>
    • <hr>
    • <address>
    • <article>
    • <aside>
    • <blockquote>
    • <canvas>
    • <dd>
    • <div>
    • <dl>
    • <dt>
    • <fieldset>
    • <figcaption>
    • <figure>
    • <footer>
    • <form>
    • <header>
    • <li>
    • <main>
    • <nav>
    • <noscript>
    • <ol>
    • <ul>
    • <pre>
    • <section>
    • <table>
    • <video>

  24. HTML Inline Elements
    HTML Inline Elements
    Inline Elements don't start on a new line. It only takes the width required to cover the content.
    Inline Elements:
    • <a>
    • <abbr>
    • <acronym>
    • <button>
    • <br>
    • <big>
    • <bdo>
    • <b>
    • <cite>
    • <code>
    • <dfn>
    • <i>
    • <em>
    • <img>
    • <input>
    • <kbd>
    • <label>
    • <map>
    • <object>
    • <output>
    • <tt>
    • <time>
    • <samp>
    • <script>
    • <select>
    • <small>
    • <span>
    • <strong>
    • <sub>
    • <sup>
    • <textarea>