Cara Setup Tailwind CSS + React Create App (CRA) - Blog - Naufaldi Rafif Satriya

Pada kesempatan kali ini, saya mencoba untuk membuat tutorial bagaimana setup / melakukan pengaturan agar bisa Tailwind CSS bisa berjalan dengan Create React App.

Setup Create React App

Pertama, dengan terlebih dahulu melakukan setup proyek CRA atau menggunakan proyek CRA yang telah ada

npx create-react-app demo

Setup Tailwind dan CRA

Kedua, kita akan menambahkan  TailwindCSS package ke CRA kita dengan melakukan

npm install tailwindcss

Install Autoprefixer dan PostCSS

Ketiga, kita akan menambahkan Autoprefixer dan PostCSS-CLI pada proyek kita dengan melakukan

npm install postcss-cli autoprefixer --save-dev

Lantas, untuk apa kita memerlukan PostCSS dan Autoprofixer?

Berdasarkan dokumentasi PostCSS,:

_PostCSS is a tool for transforming styles with JS plugins. These plugins can lint your CSS, support variables and mixins, transpile future CSS syntax, inline images, and more._

Sedangkan, Autoprefixer adalah parses  CSS kita dan  menambahkan / mengurangi  vendor prefixes yang tidak digunakan saat  kita meng-compile CSS. ini fungsinya untuk bisa menambahkan prefixer pada animations, transition, transform, grid, flex, flexbox, etc.

Mengubah Script pada package.json

Keempat, kita akan menambahkan script ke file package.json kita.

 "scripts": {
    "start": "npm run build:css && react-scripts start",
    "build": "npm run build:css && react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "build:css": "postcss src/assets/css/tailwind.css -o src/assets/css/main.css",
  },

Saya akan mencoba menjelaskan disini satu persatu.

scripts start digunakan untuk melakukan build tailwindcss kita setiap kali kita akan menjalankan React App kita. Sedangkan build mirip dengan scripts start namun digunakan saat proses production.

script build:css digunakan untuk bisa mengcompile file _tailwind.css_ kita yang berada pada direktori src/assets/css/tailwind.css menjadi file css di direktori yang sama namun dengan nama main.css .

Config PostCSS

Kelima, kita membuat file baru di diretori root proyek CRA kita dengan nama postcss.config.js atau berfungsi untuk melakukan konfigurasi pada PostCSS yang telah kita install lagi.

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

Config Tailwind

Keenam, kita membuat file baru di direktori root proyek CRA kita dengan nama tailwind.js yang berfungsi sebagai konfigurasi TailwindCSS kita. Kurang lebih isinya seperti ini sesuai dengan dokumentasi TailwindCSS

module.exports = {
  future: {},
  purge: [],
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [require("tailwindcss"), require("autoprefixer")],
};

Ketujuh, baru kita membuat sebuah file css untuk TailwindCSS kita. Karena sebelumnya saya membuat di script direktori tailwind.css maka harusnya berada pada direktori src/assets/css/tailwind.css .

tailwind.css berisi @tailwind langsung untuk inject Tailwind's base, components, and utilities styles ke CSS kita:

@tailwind base;

@tailwind components;

@tailwind utilities;

Kedelapan, kita baru melakukan import css kita ke index.js dari React App kita. Sehingga kurang lebih seperti ini :

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
// Import CSS
import './assets/css/main.css';
import * as serviceWorker from './serviceWorker';

Ingat, bahwa yang kita import bukanlah file dari tailwind.css melainkan hasil compile dari tailwind.css yaitu main.css

Kurang lebih setelah step step tersebut, kita bisa melihat direktori dari file CRA kita seperti ini :

Direktori CRA + TailwindCSS

Catatan :

• Kita bisa membuat custom css dan meletakannya di tailwind.css dengan menggunakan @apply  yang dijelaskan pada dokumentasi Tailwind. Masalahnya,adalah saat kita membuat banyak sekali custom class, maka setiap kita membuat custom class baru pada tailwind.css , kita harus build ulang / compile ulang dengan melakukan npm run build:css agar apa yang kita tulis pada tailwind.css terupdate di main.css Ada beberapa alternative untuk melakukan compile otomatis. tentunya, akan memberatkan komputer kita. yaitu dengan menggunakan tutorial dari Dave Ceddia menggunakan packages chokidar atau menggunakan watch packages.
• Optimasi untuk proses build yang akan saya tulis pada tulisan selanjutnya dengan menggunakan PurgeCSS
• Gunakan autoprefixer versi 9 apabila kamu menggunakan PostCSS versi 8. Hal ini karena ada bug / issues yang bisa teman-teman lihat disini  dan disini

Kode di Github :

[

naufaldi/cra-tailwind

Create React App + Tailwind. Contribute to naufaldi/cra-tailwind development by creating an account on GitHub.

](https://github.com/naufaldi/cra-tailwind?ref=blog.naufaldi.com)

Semoga membantu!

Dukung saya di Karyakarsa ya..

[

Dukung Naufaldi Rafif S di Karyakarsa!

Dukung Naufaldi Rafif S di Karyakarsa!

](https://karyakarsa.com/naufaldisatriya?ref=blog.naufaldi.com)

Sumber Lain :

[

Config Tailwind CSS in React JS project in TL;DR way

TL;DR Link to the React, Tailwind GitHub template https://github.com/Rohithgilla12/react-tailwind-tem...

](https://dev.to/gillarohith/config-tailwind-css-in-react-js-project-in-tl-dr-way-1m6k?ref=blog.naufaldi.com)

[

Using Tailwind CSS with Create React App

](https://daveceddia.com/tailwind-create-react-app/?ref=blog.naufaldi.com#production)

How to configure create-react-app to use Tailwind CSS

Bagikan[](https://twitter.com/share?text=Cara Setup Tailwind CSS + React Create App \(CRA\)&url=https://blog.naufaldi.com/cara-setup-tailwind-css-react-create-app-cra/ "Twitter")[](https://www.facebook.com/sharer/sharer.php?u=https://blog.naufaldi.com/cara-setup-tailwind-css-react-create-app-cra/ "Facebook")[](https://www.linkedin.com/shareArticle?mini=true&url=https://blog.naufaldi.com/cara-setup-tailwind-css-react-create-app-cra//&title=Cara Setup Tailwind CSS + React Create App \(CRA\) "LinkedIn")[](/cdn-cgi/l/email-protection#300f4345525a5553440d73514251106355444540106451595c47595e5410736363101b106255515344107342555144551071404010187362711916515d400b525f54490d584444400a1f1f525c5f571e56515c54591e48494a1f535142511d43554445401d4451595c47595e541d5343431d42555153441d5342555144551d5140401d5342511f "Email")

Topik ReactJS Tutorial TailwindCSS

[

Alasan Import SVG sebagai React Component

Permasalahan Pertama Pernah tidak mencoba untuk merubah warna SVG ? Entah kebutuhannya saat…

09 Nov 2020

](/alasan-import-svg-sebagai-react-component/)[

Cara Install React ID Swiper untuk Membuat Komponen React Slideshow

Namun, saya merasa sedikit ada masalah ketika mencoba mencoba untuk memanipulasi beberapa element HTML dan merubah styling pada pustaka tersebut sehingga mencoba alternatif lain. Akhirnya, saya menemukan yang namanya React ID Swiper.…

02 Nov 2020

](/cara-install-react-id-swiper-untuk-membuat-komponen-slideshow/)