ADD: TailwindCSS;

Installing and configuring TailwindCSS and its dependencies

Author: Davicho-Dev

.storybook/preview.js

@@ -1,3 +1,5 @@
+import 'tailwindcss/tailwind.css'
+
 export const parameters = {
 	actions: { argTypesRegex: '^on[A-Z].*' },
 	controls: {

package.json

@@ -28,12 +28,15 @@
 		"@types/react-dom": "^17.0.11",
 		"@typescript-eslint/eslint-plugin": "^5.10.0",
 		"@typescript-eslint/parser": "^5.10.0",
+		"autoprefixer": "^10.4.2",
 		"eslint": "^8.7.0",
 		"eslint-config-prettier": "^8.3.0",
 		"eslint-plugin-prettier": "^4.0.0",
 		"eslint-plugin-react": "^7.28.0",
 		"eslint-plugin-storybook": "^0.5.5",
+		"postcss": "^8.4.5",
 		"prettier": "2.5.1",
+		"tailwindcss": "^3.0.15",
 		"typescript": "^4.5.4",
 		"webpack": "^5.66.0"
 	},

postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+	plugins: {
+		tailwindcss: {},
+		autoprefixer: {},
+	},
+}

src/styles/base/_base.css

@@ -1 +1,3 @@
-
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

tailwind.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+	content: ['./src/**/*.{js,jsx,ts,tsx}'],
+	theme: {
+		extend: {},
+	},
+	plugins: [],
+}