How to add tailwindcss to your website

On this page

Intro

Tailwind CSS is a utility-first CSS framework for rapidly building custom user interfaces. It provides a low-level utility-first approach to styling, making it easy to customize and build upon.

Install Tailwind CSS using npm

  npm install tailwindcss

Add Tailwind CSS to your CSS file

Create a file input.css in the root of your project directory and add the following:

@tailwind base;

@tailwind components;

@tailwind utilities;

Generate CSS

Create a file output.css within the root of your application and run the following command to generate your CSS

    npx tailwindcss -i ./path/to/my/tailwind/input.css -o ./path/to/my/tailwind/output.css --watch --minify

This command is using the tailwindcss utility to process a CSS file and generate an output file with the styles from the input file replaced by the corresponding utility classes from Tailwind CSS.

The -i flag specifies the input CSS file, which contains the styles that will be replaced by Tailwind CSS classes. The -o flag specifies the output CSS file, where the processed styles will be saved. The --watch flag tells the tailwindcss utility to watch the input file for changes and automatically update the output file whenever the input file is modified. The --minify flag instructs the utility to minify the output CSS file, which means removing unnecessary whitespace and other characters to make the file smaller.

Import the Tailwind CSS styles in your HTML file

<link rel="stylesheet" href="path/to/my/tailwind/output.css">

Customize Tailwind CSS

You can also customize the default Tailwind CSS configuration by creating a tailwind.config.js file in the root of your project and modifying the settings as needed.

Here is an example tailwind.config.js file that you can use to customize the default Tailwind CSS configuration:

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: '#0074D9',
        secondary: '#2ECC40',
        accent: '#FFDC00',
      },
      fontSize: {
        '7xl': '5rem',
        '8xl': '6rem',
        '9xl': '7rem',
      },
      boxShadow: {
        custom:
          '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
      },
    },
  },
  variants: {
    margin: ['responsive', 'first'],
  },
  plugins: [require('@tailwindcss/custom-forms')],
}

Use Tailwind CSS

Finally, you can use the classes provided by Tailwind CSS in your HTML elements to apply styles. For example, to apply the text-blue-500 class to a p element, you can use the following code:

<p class="text-blue-500">This text will be blue.</p>

Learn more about Tailwind CSS

You can learn more about how to use Tailwind CSS on the official documentation at https://tailwindcss.com/.