Task 1 - Add Tailwind CSS

2021-02-18 21:19:13 +00:00
7 changed files with 1142 additions and 2 deletions
--- a/.gitignore
+++ b/.gitignore
@ -1,3 +1,5 @@
+/node_modules/
+/public/build/

 ###> symfony/framework-bundle ###
 /.env.local
--- a/assets/css/tailwind.pcss
+++ b/assets/css/tailwind.pcss
@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
--- a/package.json
+++ b/package.json
@ -1,5 +1,15 @@
 {
  "private": true,
-  "scripts": {},
-  "dependencies": {}
+  "scripts": {
+    "dev": "cross-env NODE_ENV=development postcss assets/css/tailwind.pcss -o public/build/tailwind.css",
+    "prod": "cross-env NODE_ENV=production postcss assets/css/tailwind.pcss -o public/build/tailwind.css",
+    "watch": "cross-env NODE_ENV=development postcss assets/css/tailwind.pcss -o public/build/tailwind.css --watch"
+  },
+  "devDependencies": {
+    "autoprefixer": "^10.2.4",
+    "cross-env": "^7.0.3",
+    "postcss": "^8.2.6",
+    "postcss-cli": "^8.3.1",
+    "tailwindcss": "^2.0.3"
+  }
 }
--- a/postcss.config.js
+++ b/postcss.config.js
@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
--- a/tailwind.config.js
+++ b/tailwind.config.js
@ -0,0 +1,11 @@
+module.exports = {
+  purge: [],
+  darkMode: false, // or 'media' or 'class'
+  theme: {
+    extend: {},
+  },
+  variants: {
+    extend: {},
+  },
+  plugins: [],
+};
--- a/templates/html.html.twig
+++ b/templates/html.html.twig
@ -4,6 +4,7 @@
        <meta charset="UTF-8">
        <title>{% block title %}Tailwind CSS workshop{% endblock %}</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+        <link rel="stylesheet" href="/build/tailwind.css"/>
        {% block stylesheets %}{% endblock %}
    </head>
    <body class="py-20 font-sans bg-blue-600">
--- a/yarn.lock
+++ b/yarn.lock