Tailwind CSS is a utility-first CSS framework for rapidly building custom user interfaces. The main difference between Tailwind CSS and BootStrap is tailwind gives utility classes rather than automatically pre-styled components, so it is easier for you to build your own classes.
What are the features of Tailwind?
- An API Model.
- Low Level Design.
- Big performance, small size.
- Responsive directly on the HTML file.
- Includes hover and focus states.
- Helps avoiding duplicates.
- Dark Mode.
- Great Customization.
Because Tailwind is a framework for building bespoke user interfaces, it has been designed from the ground up with customization in mind.
By default, Tailwind will look for an optional tailwind.config.js file at the root of your project where you can define any customizations.
// Example `tailwind.config.js` file
const colors = require('tailwindcss/colors')
module.exports = {
theme: {
colors: {
gray: colors.coolGray,
blue: colors.lightBlue,
red: colors.rose,
pink: colors.fuchsia,
},
fontFamily: {
sans: ['Graphik', 'sans-serif'],
serif: ['Merriweather', 'serif'],
},
extend: {
spacing: {
'128': '32rem',
'144': '36rem',
},
borderRadius: {
'4xl': '2rem',
}
}
},
variants: {
extend: {
borderColor: ['focus-visible'],
opacity: ['disabled'],
}
}
}
Every section of the config file is optional, so you only have to specify what you’d like to change. Any missing sections will fall back to Tailwind’s default configuration.
Creating your configuration file
Generate a Tailwind config file for your project using the Tailwind CLI utility included when you install the tailwindcss npm package:
npx tailwindcss init
This will create a minimal tailwind.config.js file at the root of your project:
// tailwind.config.js
module.exports = {
purge: [],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
Using a different file name
To use a name other than tailwind.config.js, pass it as an argument on the command-line:
npx tailwindcss init tailwindcss-config.js
If you use a custom file name, you will need to specify it when including Tailwind as a plugin in your PostCSS configuration as well:
// postcss.config.js
module.exports = {
plugins: {
tailwindcss: { config: './tailwindcss-config.js' },
},
}
Tailwind CSS introduces a different way of how a CSS framework works. It provides you with a set of utility classes which can be used to create you unique and custom design with ease. Tailwind CSS is not opinionated, so you’re completely free in choosing the design of elements and components on your website.
Learn more about Tailwind CSS here