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": {},
+  "scripts": {
-  "dependencies": {}
+    "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