CSS – Tailwind (1)

tailwind-cheat-sheet

Setup 1

• Install taiwind css package

yarn add tailwindcss@lastest --dev

• Create configuration file

npx tailwindcss init
or
npx tailwindcss init --full

• Install postcss & autoprefixer & postcss-import

yarn add postcss@latest autoprefixer@latest postcss-import@latest --dev

• Create configuration file “postcss.config.js”

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

• Configure Webpack for css file

  module: {
    rules: [
      {
        test: /\.css$/,
        exclude: /node_modules/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              importLoaders: 1,
            },
          },
          'postcss-loader',
        ],
      },
    ]

• Import necessary components
  Create “tailwind.css” file

@tailwind base;
@tailwind components;
@tailwind utilities;

• Import this css file into root src/App.js file

import '../tailwind.css';

• Test

<div class="container mx-auto bg-green-400 my-10 p-10 rounded-md">
  <h1>This is awesome</h1>
</div>

Setup 2

You can use tailwindcss directly by importing its classes like this

import '!style-loader!css-loader!postcss-loader!tailwindcss/dist/base.css';
import '!style-loader!css-loader!postcss-loader!tailwindcss/dist/components.css';
import '!style-loader!css-loader!postcss-loader!tailwindcss/dist/utilities.css';

Usage example

create a red boder

<div className='border border-red'>...</div>

max-w-sm

Add max width for small screen

rounded

Add border radius

overflow-hidden

Hide scroll bar

shadow-lg

Add background with shadow effect box-shadow

w-full

Set width as 100%

px-6

Add padding-right/left of 1.5 rem in x-axis (inside configuration file)

py-4

Add padding-top/bottom of 1 rem in y-axis (inside configuration file)

font-bold

Set font-weight 700

text-purple-500

Set a light purple color

text-xl

Set font-size extra small

mb-2

Set margin bottom 0.5rem

inline-block

Element is treated like other inline elements but allows the use of block properties

bg-gray-200

Added a background-color of gray

rounded-full

Created a border-radius of 9999px

text-sm

Set font-size of the text as small