Re-add Tailwind CSS
This commit is contained in:
parent
0401e039de
commit
fd37030d03
2
.gitignore
vendored
2
.gitignore
vendored
|
|
@ -1,2 +1,4 @@
|
|||
/node_modules/
|
||||
/output_*/
|
||||
/source/build/
|
||||
/vendor/
|
||||
|
|
|
|||
1
assets/css/base.pcss
Normal file
1
assets/css/base.pcss
Normal file
|
|
@ -0,0 +1 @@
|
|||
|
||||
0
assets/css/components.pcss
Normal file
0
assets/css/components.pcss
Normal file
8
assets/css/tailwind.pcss
Normal file
8
assets/css/tailwind.pcss
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
@import 'tailwindcss/base';
|
||||
@import 'tailwindcss/components';
|
||||
@import 'tailwindcss/utilities';
|
||||
|
||||
@import './base.pcss';
|
||||
@import './components.pcss';
|
||||
@import './utilities.pcss';
|
||||
|
||||
0
assets/css/utilities.pcss
Normal file
0
assets/css/utilities.pcss
Normal file
22
assets/js/app.js
Normal file
22
assets/js/app.js
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
import 'alpinejs'
|
||||
import 'focus-visible'
|
||||
import 'highlight.js/styles/github.css'
|
||||
import 'styles/tailwind.pcss'
|
||||
import bash from 'highlight.js/lib/languages/bash'
|
||||
import hljs from 'highlight.js/lib/core'
|
||||
import ini from 'highlight.js/lib/languages/ini'
|
||||
import javascript from 'highlight.js/lib/languages/javascript'
|
||||
import php from 'highlight.js/lib/languages/php'
|
||||
import yaml from 'highlight.js/lib/languages/yaml'
|
||||
|
||||
hljs.registerLanguage('bash', bash);
|
||||
hljs.registerLanguage('ini', ini);
|
||||
hljs.registerLanguage('javascript', javascript);
|
||||
hljs.registerLanguage('php', php);
|
||||
hljs.registerLanguage('yaml', yaml);
|
||||
|
||||
document.addEventListener('DOMContentLoaded', event => {
|
||||
document.querySelectorAll('pre code').forEach(block => {
|
||||
hljs.highlightBlock(block)
|
||||
})
|
||||
})
|
||||
9734
package-lock.json
generated
Normal file
9734
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load diff
29
package.json
Normal file
29
package.json
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
{
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "npm run development",
|
||||
"development": "encore dev",
|
||||
"prod": "npm run production",
|
||||
"production": "encore production",
|
||||
"watch": "encore dev --watch"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@symfony/webpack-encore": "^1.1.2",
|
||||
"@tailwindcss/aspect-ratio": "^0.2.0",
|
||||
"@tailwindcss/forms": "^0.2.1",
|
||||
"@tailwindcss/jit": "^0.1.1",
|
||||
"@tailwindcss/typography": "^0.4.0",
|
||||
"alpinejs": "^2.3.5",
|
||||
"autoprefixer": "^10.2.5",
|
||||
"elliptic": ">=6.5.3",
|
||||
"focus-visible": "^5.1.0",
|
||||
"highlight.js": "^10.4.1",
|
||||
"lodash": ">=4.17.19",
|
||||
"postcss": "^8.2.1",
|
||||
"postcss-easy-import": "^3.0.0",
|
||||
"postcss-loader": "^5.2.0",
|
||||
"postcss-nested": "^5.0.5",
|
||||
"tailwindcss": "^2.0.2",
|
||||
"webpack-notifier": "^1.8.0"
|
||||
}
|
||||
}
|
||||
10
postcss.config.js
Normal file
10
postcss.config.js
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
module.exports = {
|
||||
plugins: {
|
||||
'postcss-easy-import': {
|
||||
extensions: ['.css', '.pcss']
|
||||
},
|
||||
'@tailwindcss/jit': {},
|
||||
'postcss-nested': {},
|
||||
autoprefixer: {}
|
||||
}
|
||||
}
|
||||
|
|
@ -5,6 +5,7 @@
|
|||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>{{ site.name|default('Sculpin Skeleton') }}</title>
|
||||
<link type="text/css" rel="stylesheet" href="/build/app.css"/>
|
||||
</head>
|
||||
<body>
|
||||
{% block body %}{% endblock %}
|
||||
|
|
|
|||
122
tailwind-colours.js
Normal file
122
tailwind-colours.js
Normal file
|
|
@ -0,0 +1,122 @@
|
|||
module.exports = {
|
||||
current: 'currentColor',
|
||||
inherit: 'inherit',
|
||||
transparent: 'transparent',
|
||||
|
||||
black: '#000',
|
||||
white: '#fff',
|
||||
|
||||
gray: {
|
||||
50: '#f9f9f9',
|
||||
100: '#f5f5f5',
|
||||
150: '#eee',
|
||||
200: '#aaa',
|
||||
300: '#e2e8f0',
|
||||
400: '#cbd5e0',
|
||||
500: '#a0aec0',
|
||||
600: '#718096',
|
||||
700: '#36393e',
|
||||
750: '#2e3136',
|
||||
800: '#1e2125',
|
||||
900: '#18171b',
|
||||
},
|
||||
red: {
|
||||
100: '#fff5f5',
|
||||
200: '#fed7d7',
|
||||
300: '#feb2b2',
|
||||
400: '#fc8181',
|
||||
500: '#f56565',
|
||||
600: '#e53e3e',
|
||||
700: '#c53030',
|
||||
800: '#9b2c2c',
|
||||
900: '#742a2a',
|
||||
},
|
||||
orange: {
|
||||
100: '#fffaf0',
|
||||
200: '#feebc8',
|
||||
300: '#fbd38d',
|
||||
400: '#f6ad55',
|
||||
500: '#ed8936',
|
||||
600: '#dd6b20',
|
||||
700: '#c05621',
|
||||
800: '#9c4221',
|
||||
900: '#7b341e',
|
||||
},
|
||||
yellow: {
|
||||
100: '#fffff0',
|
||||
200: '#fefcbf',
|
||||
300: '#faf089',
|
||||
400: '#f6e05e',
|
||||
500: '#ecc94b',
|
||||
600: '#d69e2e',
|
||||
700: '#b7791f',
|
||||
800: '#975a16',
|
||||
900: '#744210',
|
||||
},
|
||||
green: {
|
||||
100: '#f0fff4',
|
||||
200: '#c6f6d5',
|
||||
300: '#9ae6b4',
|
||||
400: '#68d391',
|
||||
500: '#48bb78',
|
||||
600: '#38a169',
|
||||
700: '#2f855a',
|
||||
800: '#276749',
|
||||
900: '#22543d',
|
||||
},
|
||||
teal: {
|
||||
100: '#e6fffa',
|
||||
200: '#b2f5ea',
|
||||
300: '#81e6d9',
|
||||
400: '#4fd1c5',
|
||||
500: '#38b2ac',
|
||||
600: '#319795',
|
||||
700: '#2c7a7b',
|
||||
800: '#285e61',
|
||||
900: '#234e52',
|
||||
},
|
||||
blue: {
|
||||
100: '#ebf8ff',
|
||||
200: '#bee3f8',
|
||||
300: '#90cdf4',
|
||||
400: '#63b3ed',
|
||||
500: '#4299e1',
|
||||
600: '#3182ce',
|
||||
700: '#2b6cb0',
|
||||
800: '#2c5282',
|
||||
900: '#2a4365',
|
||||
},
|
||||
indigo: {
|
||||
100: '#ebf4ff',
|
||||
200: '#c3dafe',
|
||||
300: '#a3bffa',
|
||||
400: '#7f9cf5',
|
||||
500: '#667eea',
|
||||
600: '#5a67d8',
|
||||
700: '#4c51bf',
|
||||
800: '#434190',
|
||||
900: '#3c366b',
|
||||
},
|
||||
purple: {
|
||||
100: '#faf5ff',
|
||||
200: '#e9d8fd',
|
||||
300: '#d6bcfa',
|
||||
400: '#b794f4',
|
||||
500: '#9f7aea',
|
||||
600: '#805ad5',
|
||||
700: '#6b46c1',
|
||||
800: '#553c9a',
|
||||
900: '#44337a',
|
||||
},
|
||||
pink: {
|
||||
100: '#fff5f7',
|
||||
200: '#fed7e2',
|
||||
300: '#fbb6ce',
|
||||
400: '#f687b3',
|
||||
500: '#ed64a6',
|
||||
600: '#d53f8c',
|
||||
700: '#b83280',
|
||||
800: '#97266d',
|
||||
900: '#702459',
|
||||
}
|
||||
}
|
||||
9
tailwind-plugin-focus-visible.js
Normal file
9
tailwind-plugin-focus-visible.js
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
const plugin = require('tailwindcss/plugin')
|
||||
|
||||
module.exports = plugin(function({ addVariant, e }) {
|
||||
addVariant('focus-visible', ({ modifySelectors, separator }) => {
|
||||
modifySelectors(({ className }) => {
|
||||
return `.${e(`focus-visible${separator}${className}`)}[data-focus-visible-added]`
|
||||
})
|
||||
})
|
||||
})
|
||||
32
tailwind-safelist-classes.txt
Normal file
32
tailwind-safelist-classes.txt
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
bg-blue-600
|
||||
bg-gray-200
|
||||
block
|
||||
block-opdavies-branding
|
||||
border
|
||||
border-gray
|
||||
border-l-0
|
||||
flex
|
||||
flex-col
|
||||
flex-none
|
||||
italic
|
||||
my-auto
|
||||
p-3
|
||||
pl-5
|
||||
pr-6
|
||||
py-3
|
||||
rounded-full
|
||||
rounded-l-full
|
||||
rounded-r-full
|
||||
sm:flex-row
|
||||
sm:space-x-4
|
||||
sm:space-y-0
|
||||
space-x-3
|
||||
space-y-3
|
||||
space-y-4
|
||||
text-center
|
||||
text-sm
|
||||
text-white
|
||||
w-16
|
||||
w-32
|
||||
w-auto
|
||||
w-full
|
||||
104
tailwind.config.js
Normal file
104
tailwind.config.js
Normal file
|
|
@ -0,0 +1,104 @@
|
|||
const aspectRatio = require('@tailwindcss/aspect-ratio')
|
||||
const colors = require('./tailwind-colours')
|
||||
const defaultTheme = require('tailwindcss/defaultTheme')
|
||||
const focusVisible = require('./tailwind-plugin-focus-visible')
|
||||
const forms = require('@tailwindcss/forms')
|
||||
const typography = require('@tailwindcss/typography')
|
||||
const { fontFamily } = defaultTheme
|
||||
|
||||
module.exports = {
|
||||
darkMode: false,
|
||||
important: true,
|
||||
purge: {
|
||||
content: [
|
||||
'tailwind-safelist-classes.txt',
|
||||
'source/**/*.{md,twig}',
|
||||
],
|
||||
},
|
||||
theme: {
|
||||
extend: {
|
||||
typography: (theme) => ({
|
||||
DEFAULT: {
|
||||
css: {
|
||||
a: {
|
||||
color: theme('colors.blue.700')
|
||||
},
|
||||
code: {
|
||||
backgroundColor: theme('colors.gray.150'),
|
||||
fontWeight: theme('fontWeight.normal'),
|
||||
paddingBottom: theme('spacing.px'),
|
||||
paddingLeft: theme('spacing.1'),
|
||||
paddingRight: theme('spacing.1'),
|
||||
paddingTop: theme('spacing.px')
|
||||
},
|
||||
h2: {
|
||||
marginBottom: theme('spacing.2'),
|
||||
marginTop: theme('spacing.8')
|
||||
},
|
||||
pre: {
|
||||
backgroundColor: theme('colors.gray.150'),
|
||||
borderRadius: '0',
|
||||
color: theme('colors.gray.800'),
|
||||
padding: theme('spacing.6')
|
||||
},
|
||||
'code::before': false,
|
||||
'code::after': false,
|
||||
'pre code::before': false,
|
||||
'pre code::after': false
|
||||
}
|
||||
},
|
||||
dark: {
|
||||
css: {
|
||||
color: theme('colors.gray.200'),
|
||||
|
||||
code: {
|
||||
backgroundColor: theme('colors.gray.750'),
|
||||
color: theme('colors.gray.200')
|
||||
},
|
||||
|
||||
'blockquote, h2, h3': {
|
||||
color: theme('colors.white')
|
||||
},
|
||||
|
||||
strong: {
|
||||
color: theme('colors.gray.200')
|
||||
}
|
||||
}
|
||||
}
|
||||
}),
|
||||
colors,
|
||||
fontFamily: {
|
||||
sans: [
|
||||
'Inter',
|
||||
'Arial',
|
||||
'Helvetica Neue',
|
||||
'Helvetica',
|
||||
'sans-serif',
|
||||
],
|
||||
mono: [
|
||||
'Operator Mono',
|
||||
'Roboto Mono',
|
||||
...fontFamily.mono
|
||||
]
|
||||
},
|
||||
spacing: {
|
||||
'2px': '2px'
|
||||
},
|
||||
borderWidth: {
|
||||
3: '3px'
|
||||
},
|
||||
width: {
|
||||
96: '24rem'
|
||||
}
|
||||
}
|
||||
},
|
||||
corePlugins: {
|
||||
container: false
|
||||
},
|
||||
plugins: [
|
||||
aspectRatio,
|
||||
focusVisible,
|
||||
forms,
|
||||
typography
|
||||
]
|
||||
}
|
||||
27
webpack.config.js
Normal file
27
webpack.config.js
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
let Encore = require('@symfony/webpack-encore')
|
||||
let path = require('path')
|
||||
|
||||
Encore
|
||||
.disableSingleRuntimeChunk()
|
||||
.cleanupOutputBeforeBuild()
|
||||
.setOutputPath('source/build/')
|
||||
.setPublicPath('/build')
|
||||
.setManifestKeyPrefix('build/')
|
||||
|
||||
.addEntry('app', '@/app.js')
|
||||
|
||||
.enablePostCssLoader()
|
||||
|
||||
.addAliases({
|
||||
'@': path.resolve(__dirname, 'assets', 'js'),
|
||||
styles: path.resolve(__dirname, 'assets', 'css')
|
||||
})
|
||||
|
||||
if (!Encore.isProduction()) {
|
||||
Encore.enableSourceMaps()
|
||||
}
|
||||
|
||||
process.env.NODE_ENV =
|
||||
process.env.NODE_ENV || Encore.isProduction() ? 'production' : 'development';
|
||||
|
||||
module.exports = Encore.getWebpackConfig()
|
||||
Loading…
Reference in a new issue